一個更優雅的方式來編寫這個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()); 
});