Запускайте анимацию jQuery только один раз, затем делайте другие вещи, а затем обращайте анимацию

Question

У меня есть меню с набором li, которое при наведении курсора анимирует высоту контейнера и затем показывает связанный дочерний элемент .subnav.

Проблемы, которые яУ меня есть 2 раза.

1. Когда я наведите курсор мыши на li ' быстро , анимация контейнера замедляется, поскольку он запускаетанимация снова с этого момента.Я хотел бы иметь возможность сказать «Только анимируйте этот один раз при наведении курсора на любые li» и затем возвращайте его в исходное положение при зависании из контейнера или субнава.

2. Когда показывается содержимое .subnav, и я наводю указатель мыши на другой триггер li, похоже, что анимация пытается снова запустить контейнер, и, таким образом, имеется задержка в любых действиях, которые предполагаетсяпроизойти после.

Я пытался использовать unbind() и bind(), но безуспешно, я также пытался использовать :animated, но я не могу понять правильную логику.

Вот мой код:

var navHeight = $('#primary-nav').height();

$('#primary-nav-list li').hover( function() {
    var elem = $(this);

    if ($(this).is('#roc-noir')){ var subnavHeight = 173; }
    else { var subnavHeight = 235; }

    $('#primary-nav').stop(true,false).animate({height:subnavHeight}, function(){
        $('#primary-nav-list li').removeClass('active');
        $(this).addClass('open');
        $(elem).addClass('active');
        $('#primary-nav-list li').not(this).find('.subnav').fadeOut('fast');
        $(elem).find('.subnav').fadeIn('fast');
    });         
}, function(){
    $('#primary-nav').removeClass('open');
    $('#primary-nav').stop(true,false).animate({height:navHeight}, function(){
        $('#primary-nav-list li').removeClass('active');    
        $('#primary-nav-list li').not(this).find('.subnav').hide();
    });
});

Буду признателен за любую помощь.

Answer 1

Взгляните на плагин Hover Intent и убедитесь, что он делает то, что вам нужно.Добавляет небольшую задержку перед запуском, а затем «останавливает» анимацию.

Answer 2

Может быть, что-то вроде этого - флаг прерывания, если он уже запущен?

var navHeight = $('#primary-nav').height();

var running = false;

var controller = {
     hoverIn : function() {
       if (running) return;
       running = true;

       var elem = $(this);
       var subnavHeight = 235;

       if ($(this).is('#roc-noir')) { subnavHeight = 173; }

       $('#primary-nav').stop(true,false).animate({height:subnavHeight}, function(){
          $('#primary-nav-list li').removeClass('active');
          $(this).addClass('open');
          $(elem).addClass('active');
          $('#primary-nav-list li').not(this).find('.subnav').fadeOut('fast');
          $(elem).find('.subnav').fadeIn('fast');
       });         
    },
    hoverOut : function(){
       if (running) return;

       $('#primary-nav').removeClass('open');
       $('#primary-nav').stop(true,false).animate({height:navHeight}, function(){
          $('#primary-nav-list li').removeClass('active');    
          $('#primary-nav-list li').not(this).find('.subnav').hide();
          running = false;
       });

    }

$('#primary-nav-list li').hover(controller.hoverIn,controller.hoverOut);