1

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

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

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

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

现场预览 - 现场检查问题

4

1 回答 1

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

于 2010-09-27T12:48:50.680 回答