한 번만 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);