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