jQuery: Как создать функцию наведения jQuery?

Question

Я хочу создать две функции, которые затухают и выходят из элемента.

Это то, что я сделал до сих пор, но проблема заключается в том, что если вы перемещаете мышь, когда находитесь в зависающем элементе, она начинает вибрировать: | Как мне заставить его не вибрировать и работать правильно?

<script language="javascript" type="text/javascript"> 
function hoverIn(target, speed){ 
    $(target).fadeIn(speed); 
} 

function hoverOut(target, speed){ 
    $(target).fadeOut(speed); 
} 
</script> 

LIVE PREVIEW - check out the problem in live

Answer 1

Лучший способ сделать это будет использовать ненавязчивый сценарий, главное вы хотите это .stop() вызов, чтобы остановить предыдущую анимацию, например:

<script type="text/javascript"> 
function hoverIn(target, speed){ 
    $(target).stop(true, true).fadeIn(speed); 
} 

function hoverOut(target, speed){ 
    $(target).stop(true, true).fadeOut(speed); 
} 
</script> 

Это все еще проблема, потому что mouseover и mouseout пожар при входе/выходе ребенка. Однако .hover() использует mouseenter и mouseleave, которые не страдают той же проблемой, и устранит вашу проблему «вибрации».

Ненавязчивый версия выглядит следующим образом:

$(function() { 
    $("ul > li").hover(function() { 
    $(this).find("ul").stop(true, true).fadeIn('fast'); 
    }, function() { 
    $(this).find("ul").stop(true, true).fadeOut('fast'); 
    }); 
});​ 

You can see it here, или даже более короткую версию:

$(function() { 
    $("ul > li").hover(function() { 
    $(this).find("ul").stop(true, true).animate({opacity: 'toggle'}, 'fast'); 
    }); 
});​ 

You can test that here, обратите внимание, что все эти ненавязчивые подходы не используйте встроенный JavaScript, и работать для нескольких дочерних меню.