jquery - 编写这个 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);
    }

});

这是我的困境的一个小提琴。

Answer 1

尝试这个：

这是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());
});