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，并且适用于多个子菜单。

jQuery：如何创建jQuery悬停函数？

1 个答案: