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 - проверьте проблему в прямом эфире

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');
  });
});​

Вы можете увидеть это здесь, или даже более короткую версию:

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

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