JQuery와 호버 메뉴 fadein/숨기기 드롭 다운

Question

는 좀 JQuery와

$(".dropdown").hide(); 

$('#mainnav ul li').hover(function(e){ 
     $(this).children('.dropdown').fadeIn(250); 
}, function(e) { 
     $(this).children('.dropdown').hide(); 
}); 

이 페이드하고 LI가 가리킬 부모 때 각 메뉴가 드롭 다운 숨 깁니다에게 있습니다.

jquery가 충분히 견고하다는 확신이 들지 않습니다. 마우스가 부모님의 속도에 따라 이동하면 드롭 다운이 숨겨지지 않는 경우가 있습니다.

이 코드의 안정성을 향상시킬 수있는 방법이 있습니까?

감사

Answer 1

어쩌면이 코드가 당신에게 도움이 될 수 있습니다

$(".dropdown").hide(); 
    $('#mainnav ul li').hover(function(){ 
     $(this).children('.dropdown').stop().fadeIn(250); 
    }, function() { 
     $(this).children('.dropdown').stop().hide(); 
    }); 

또는

$('#mainnav ul li').hover(function(){ 
    if($(this).children('.dropdown').css('display') == 'none'){ 
    $(this).children('.dropdown').fadeIn(250); 
    } else { 
    $(this).children('.dropdown').stop().hide(); 
    } 
}); 

행운

Answer 2

xFortyFourx가 언급 한 바와 같이, 당신은 대기열을 취소 .stop() 방법을 사용할 수 있습니다 . jQuery를 documentation가 말했듯이, 방법은 애니메이션 작동 중지, 그래서 당신은 더 나은 반투명 모드에서 동결 요소의 원인이됩니다 .fadeIn()와 .stop()를 사용 .animate() 대신 .fadeIn() 및 .fadeOut()

$("#mainnav ul li").hover(
    function() { 
     $(this).children('.dropdown').stop().animate({opacity: 1}); 
    }, 
    function() { 
     $(this).children('.dropdown').stop().animate({opacity: 0}); 
    } 
); 

을 사용하십시오. ( `.stop()를 fadeIn : http://jsfiddle.net/stichoza/faqNt/