Question

我有一个下面写的jQuery函数。我希望在函数中发生的是.fadeToggle在所选div将pod扩展类应用于自身之前消除不需要的元素。出于某种原因，每当我添加包含toggleClass podexpanded的setTimeout函数时，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（this）像这样：

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>

设置超时不能在jQuery序列中工作

2 个答案: