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

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

1 голос
/ 27 сентября 2010

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

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

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

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

LIVE PREVIEW - проверьте проблему в прямом эфире

1 Ответ

1 голос
/ 27 сентября 2010

Лучшим способом сделать это было бы использование ненавязчивого скрипта, главное, чтобы вы вызывали .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 и работают для нескольких дочерних меню.

...