一个更优雅的方式来编写这个jQuery？

Question

我不得不把它分成两部分，尽管它是切换。这是因为我想让添加和删除类的动画不同。

当活跃类被添加我需要UL等待，直到积极的CSS过渡完成（0.2秒），然后触发jQuery。

当活动类被删除我需要先启动UL宽度动画，然后完成删除活动类。

现在正因为如此，它感觉肮脏和便宜。有没有简单而优雅的解决方案？

// toggle filters 
$(".filter .toggle").on('click', function() { 

    if ($('.toggle').hasClass('active')) { 

     $('.filter ul').animate({ 
      width: 'toggle' 
     }, 500, function() { 
      $('.filter .toggle').toggleClass('active'); 
     }); 

    } else { 
     $('.filter').find('.toggle').toggleClass('active').end() 
      .find('ul').delay(150).animate({ 
      width: 'toggle' 
     }, 500); 
    } 

}); 

这是a fiddle我的两难境地。

Answer 1

试试这个：

Here is jsFiddle.

if (!$('.filter ul').is(':animated') && $('.toggle').hasClass('active')) { 

    $('.filter ul').stop().animate({ 
     width: 'toggle' 
    }, 500, function() { 
     $('.filter .toggle').toggleClass('active'); 
    }); 

} else { 
    $('.filter').find('.toggle').toggleClass('active').end() 
     .find('ul').animate({width: 'toggle' 
    }, 500); 
} 

Answer 2

这种模式适用于在不同的元素可逆的动画队列的所有方式：

• 把你的序列进入封闭的数组。
• 如果您希望它向后运行，请致电reverse。
• reduce将数组转换为JQuery诺言链。

$(".filter .toggle").on('click', function() { 
    var a = [ function() { return $('.filter .toggle').toggleClass("active"); } , 
      function() { return $('.filter ul').animate({width: 'toggle'}, 500); } ]; 
    if ($(this).hasClass('active')) a.reverse(); 
    a.reduce(function(p,c){ return p.then(function(){return c().promise();}); }, $.when()); 
});