jQuery：如何创建 jQuery 悬停功能？

Question

我想创建两个淡入和淡出元素的函数。

这就是我到目前为止所做的，但问题是，如果您在悬停元素中移动鼠标，它就会开始振动：|我该如何让它不振动并正常工作？

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

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

实时预览 - 查看实时问题

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>

这仍然是一个问题，因为 鼠标悬停 和 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，并且适用于多个子菜单。