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 promise链中。

$(".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());
});

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

2 个答案: