Set timeout not working in jQuery sequence

I have a jQuery function written below. What I would like to happen in the function is for the .fadeToggle to disappear the unwanted elements BEFORE the selected div applies the pod expanded class to itself. For some reason whenever i add the setTimeout function wrapped around toggleClass podexpanded the toggleClass expand part does not work. without the setTimout the function works fine but i need to delay the second part of the code until the first part is finished.

Here is my code:

jQuery(document).on('click', '.portfoliopod', function(){



jQuery('.portfoliopod').not(jQuery(this)).fadeToggle(500);



setTimeout(function () {

    jQuery(this).toggleClass('podexpanded');

   }, 600);



jQuery(this).toggleClass("portfolioimagezoom");



jQuery(this).children(".portfoliopodmessage").toggleClass('hidepod');



setTimeout(function () {

    jQuery(".portfolioimage").toggleClass('portfolioimagelarge');



}, 400);

});

edited Nov 22 '18 at 4:18

Cœur

18.4k9109148

asked Oct 10 '14 at 18:50

red house 87

311828

2

You can't use this inside of the setTimeout. When the function is ran, setTimeout sets this to window.

– Rocket Hazmat
Oct 10 '14 at 18:54

add a comment |

Here is my code:

jQuery(document).on('click', '.portfoliopod', function(){



jQuery('.portfoliopod').not(jQuery(this)).fadeToggle(500);



setTimeout(function () {

    jQuery(this).toggleClass('podexpanded');

   }, 600);



jQuery(this).toggleClass("portfolioimagezoom");



jQuery(this).children(".portfoliopodmessage").toggleClass('hidepod');



setTimeout(function () {

    jQuery(".portfolioimage").toggleClass('portfolioimagelarge');



}, 400);

});

edited Nov 22 '18 at 4:18

Cœur

18.4k9109148

asked Oct 10 '14 at 18:50

red house 87

311828

2

You can't use this inside of the setTimeout. When the function is ran, setTimeout sets this to window.

– Rocket Hazmat
Oct 10 '14 at 18:54

add a comment |

Here is my code:

jQuery(document).on('click', '.portfoliopod', function(){



jQuery('.portfoliopod').not(jQuery(this)).fadeToggle(500);



setTimeout(function () {

    jQuery(this).toggleClass('podexpanded');

   }, 600);



jQuery(this).toggleClass("portfolioimagezoom");



jQuery(this).children(".portfoliopodmessage").toggleClass('hidepod');



setTimeout(function () {

    jQuery(".portfolioimage").toggleClass('portfolioimagelarge');



}, 400);

});

edited Nov 22 '18 at 4:18

Cœur

18.4k9109148

asked Oct 10 '14 at 18:50

red house 87

311828

Here is my code:

jQuery(document).on('click', '.portfoliopod', function(){



jQuery('.portfoliopod').not(jQuery(this)).fadeToggle(500);



setTimeout(function () {

    jQuery(this).toggleClass('podexpanded');

   }, 600);



jQuery(this).toggleClass("portfolioimagezoom");



jQuery(this).children(".portfoliopodmessage").toggleClass('hidepod');



setTimeout(function () {

    jQuery(".portfolioimage").toggleClass('portfolioimagelarge');



}, 400);

});

jquery

edited Nov 22 '18 at 4:18

Cœur

18.4k9109148

asked Oct 10 '14 at 18:50

red house 87

311828

edited Nov 22 '18 at 4:18

Cœur

18.4k9109148

asked Oct 10 '14 at 18:50

red house 87

311828

edited Nov 22 '18 at 4:18

Cœur

18.4k9109148

edited Nov 22 '18 at 4:18

Cœur

18.4k9109148

edited Nov 22 '18 at 4:18

Cœur

18.4k9109148

asked Oct 10 '14 at 18:50

red house 87

311828

asked Oct 10 '14 at 18:50

red house 87

311828

asked Oct 10 '14 at 18:50

red house 87

311828

2

You can't use this inside of the setTimeout. When the function is ran, setTimeout sets this to window.

– Rocket Hazmat
Oct 10 '14 at 18:54

add a comment |

2

You can't use this inside of the setTimeout. When the function is ran, setTimeout sets this to window.

– Rocket Hazmat
Oct 10 '14 at 18:54

You can't use this inside of the setTimeout. When the function is ran, setTimeout sets this to window.

– Rocket Hazmat
Oct 10 '14 at 18:54

add a comment |

2 Answers
2

active

oldest

votes

Before any setTimeout calls, add:

 var th = jQuery(this);

then in the timeout functions us th instead of jQuery(this) like this:

th.toggleClass('podexpanded');

answered Oct 10 '14 at 18:58

Brian

8081612

works! thanks mate

– red house 87
Oct 10 '14 at 19:02

add a comment |

-1

fadeToggle's third argument allows for you to supply a function that executes after fadeToggle's animation completes.

jQuery(document).on('click', '.portfoliopod', function()

{



    jQuery('.portfoliopod').not(jQuery(this)).fadeToggle(500, 'swing', function() 

    { 

         $(this).toggleClass('podexpanded');

    });

});

$(document).ready(function() 

{ 



  $("#test").hide();

  

  $("#test").fadeToggle(500, 'swing', function() 

  {

    $(this).addClass('a_new_class').html('Update to this text after fadein in original div.');

  });

  

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="test">My text</div>

edited Oct 10 '14 at 19:17

answered Oct 10 '14 at 18:58

Venice

1,593179

will not work for the same reason the timeouts are not working. using "this" inside of a function refers to that function.

– Brian
Oct 10 '14 at 19:02

Using $(this) refers to the original selection element that fadeToggle was applied too, not the function being called. There is absolutely no reason to use setTimeOut in this case. I added an example code snippet.

– Venice
Oct 10 '14 at 19:17

Please see the example I edited into the answer. It demonstrates what I am saying perfectly. 'this' referes to the object invoking the method, not the method itself. This, my friend, is basic javascript.

– Venice
Oct 10 '14 at 19:39

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f26306126%2fset-timeout-not-working-in-jquery-sequence%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

Before any setTimeout calls, add:

 var th = jQuery(this);

then in the timeout functions us th instead of jQuery(this) like this:

th.toggleClass('podexpanded');

answered Oct 10 '14 at 18:58

Brian

8081612

works! thanks mate

– red house 87
Oct 10 '14 at 19:02

add a comment |

Before any setTimeout calls, add:

 var th = jQuery(this);

then in the timeout functions us th instead of jQuery(this) like this:

th.toggleClass('podexpanded');

answered Oct 10 '14 at 18:58

Brian

8081612

works! thanks mate

– red house 87
Oct 10 '14 at 19:02

add a comment |

Before any setTimeout calls, add:

 var th = jQuery(this);

then in the timeout functions us th instead of jQuery(this) like this:

th.toggleClass('podexpanded');

answered Oct 10 '14 at 18:58

Brian

8081612

Before any setTimeout calls, add:

 var th = jQuery(this);

then in the timeout functions us th instead of jQuery(this) like this:

th.toggleClass('podexpanded');

answered Oct 10 '14 at 18:58

Brian

8081612

answered Oct 10 '14 at 18:58

Brian

8081612

answered Oct 10 '14 at 18:58

Brian

8081612

answered Oct 10 '14 at 18:58

Brian

8081612

works! thanks mate

– red house 87
Oct 10 '14 at 19:02

add a comment |

works! thanks mate

– red house 87
Oct 10 '14 at 19:02

works! thanks mate

– red house 87
Oct 10 '14 at 19:02

add a comment |

-1

fadeToggle's third argument allows for you to supply a function that executes after fadeToggle's animation completes.

jQuery(document).on('click', '.portfoliopod', function()

{



    jQuery('.portfoliopod').not(jQuery(this)).fadeToggle(500, 'swing', function() 

    { 

         $(this).toggleClass('podexpanded');

    });

});

$(document).ready(function() 

{ 



  $("#test").hide();

  

  $("#test").fadeToggle(500, 'swing', function() 

  {

    $(this).addClass('a_new_class').html('Update to this text after fadein in original div.');

  });

  

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="test">My text</div>

edited Oct 10 '14 at 19:17

answered Oct 10 '14 at 18:58

Venice

1,593179

will not work for the same reason the timeouts are not working. using "this" inside of a function refers to that function.

– Brian
Oct 10 '14 at 19:02

Using $(this) refers to the original selection element that fadeToggle was applied too, not the function being called. There is absolutely no reason to use setTimeOut in this case. I added an example code snippet.

– Venice
Oct 10 '14 at 19:17

Please see the example I edited into the answer. It demonstrates what I am saying perfectly. 'this' referes to the object invoking the method, not the method itself. This, my friend, is basic javascript.

– Venice
Oct 10 '14 at 19:39

add a comment |

-1

fadeToggle's third argument allows for you to supply a function that executes after fadeToggle's animation completes.

jQuery(document).on('click', '.portfoliopod', function()

{



    jQuery('.portfoliopod').not(jQuery(this)).fadeToggle(500, 'swing', function() 

    { 

         $(this).toggleClass('podexpanded');

    });

});

$(document).ready(function() 

{ 



  $("#test").hide();

  

  $("#test").fadeToggle(500, 'swing', function() 

  {

    $(this).addClass('a_new_class').html('Update to this text after fadein in original div.');

  });

  

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="test">My text</div>

edited Oct 10 '14 at 19:17

answered Oct 10 '14 at 18:58

Venice

1,593179

will not work for the same reason the timeouts are not working. using "this" inside of a function refers to that function.

– Brian
Oct 10 '14 at 19:02

Using $(this) refers to the original selection element that fadeToggle was applied too, not the function being called. There is absolutely no reason to use setTimeOut in this case. I added an example code snippet.

– Venice
Oct 10 '14 at 19:17

Please see the example I edited into the answer. It demonstrates what I am saying perfectly. 'this' referes to the object invoking the method, not the method itself. This, my friend, is basic javascript.

– Venice
Oct 10 '14 at 19:39

add a comment |

-1

fadeToggle's third argument allows for you to supply a function that executes after fadeToggle's animation completes.

jQuery(document).on('click', '.portfoliopod', function()

{



    jQuery('.portfoliopod').not(jQuery(this)).fadeToggle(500, 'swing', function() 

    { 

         $(this).toggleClass('podexpanded');

    });

});

$(document).ready(function() 

{ 



  $("#test").hide();

  

  $("#test").fadeToggle(500, 'swing', function() 

  {

    $(this).addClass('a_new_class').html('Update to this text after fadein in original div.');

  });

  

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="test">My text</div>

edited Oct 10 '14 at 19:17

answered Oct 10 '14 at 18:58

Venice

1,593179

fadeToggle's third argument allows for you to supply a function that executes after fadeToggle's animation completes.

jQuery(document).on('click', '.portfoliopod', function()

{



    jQuery('.portfoliopod').not(jQuery(this)).fadeToggle(500, 'swing', function() 

    { 

         $(this).toggleClass('podexpanded');

    });

});

$(document).ready(function() 

{ 



  $("#test").hide();

  

  $("#test").fadeToggle(500, 'swing', function() 

  {

    $(this).addClass('a_new_class').html('Update to this text after fadein in original div.');

  });

  

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="test">My text</div>

$(document).ready(function() 

{ 



  $("#test").hide();

  

  $("#test").fadeToggle(500, 'swing', function() 

  {

    $(this).addClass('a_new_class').html('Update to this text after fadein in original div.');

  });

  

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="test">My text</div>

$(document).ready(function() 

{ 



  $("#test").hide();

  

  $("#test").fadeToggle(500, 'swing', function() 

  {

    $(this).addClass('a_new_class').html('Update to this text after fadein in original div.');

  });

  

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="test">My text</div>

edited Oct 10 '14 at 19:17

answered Oct 10 '14 at 18:58

Venice

1,593179

edited Oct 10 '14 at 19:17

answered Oct 10 '14 at 18:58

Venice

1,593179

answered Oct 10 '14 at 18:58

Venice

1,593179

answered Oct 10 '14 at 18:58

Venice

1,593179

will not work for the same reason the timeouts are not working. using "this" inside of a function refers to that function.

– Brian
Oct 10 '14 at 19:02

Using $(this) refers to the original selection element that fadeToggle was applied too, not the function being called. There is absolutely no reason to use setTimeOut in this case. I added an example code snippet.

– Venice
Oct 10 '14 at 19:17

Please see the example I edited into the answer. It demonstrates what I am saying perfectly. 'this' referes to the object invoking the method, not the method itself. This, my friend, is basic javascript.

– Venice
Oct 10 '14 at 19:39

add a comment |

will not work for the same reason the timeouts are not working. using "this" inside of a function refers to that function.

– Brian
Oct 10 '14 at 19:02

Using $(this) refers to the original selection element that fadeToggle was applied too, not the function being called. There is absolutely no reason to use setTimeOut in this case. I added an example code snippet.

– Venice
Oct 10 '14 at 19:17

Please see the example I edited into the answer. It demonstrates what I am saying perfectly. 'this' referes to the object invoking the method, not the method itself. This, my friend, is basic javascript.

– Venice
Oct 10 '14 at 19:39

will not work for the same reason the timeouts are not working. using "this" inside of a function refers to that function.

– Brian
Oct 10 '14 at 19:02

Using $(this) refers to the original selection element that fadeToggle was applied too, not the function being called. There is absolutely no reason to use setTimeOut in this case. I added an example code snippet.

– Venice
Oct 10 '14 at 19:17

Please see the example I edited into the answer. It demonstrates what I am saying perfectly. 'this' referes to the object invoking the method, not the method itself. This, my friend, is basic javascript.

– Venice
Oct 10 '14 at 19:39

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu