Более элегантный способ написать этот 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()); 
});