设置超时不工作在jQuery sequnce

Question

我有一个jQuery函数写在下面。我想在函数中发生的是，.fadeToggle消除不需要的元素，之后选定的div将pod扩展类应用于其自身。由于某种原因，每当我添加setTimeout函数wrapping toggleClass podexpanded toggleClass展开部分不起作用。没有setTimout函数工作正常，但我需要延迟代码的第二部分，直到第一部分完成。

这里是我的代码：

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); 
}); 

Answer 1

任何的setTimeout调用之前，添加：

var th = jQuery(this); 

然后在超时功能，我们日，而不是jQuery的（这）是这样的：

th.toggleClass('podexpanded'); 

Answer 2

fadeToggle的第三个参数允许你以供应fadeToggle的动画完成后执行的函数。

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>