hover动画上的jQuery多次触发

我试图弄清楚为什么我的hoverfunction表现得很奇怪。 当您将鼠标hover在div上时，另一个div变为可见。 但是，当我将光标向下移动到可见的div时，它会淡出并再次淡入。 这不应该发生，应该保持可见，直到我的光标离开主容器。

这是我的代码。

HTML

 
Hover here!
 
 
 
 Search:  Search 
  //  
 
 
  

jQuery的

  jQuery(function($) { $("#searchWrapper").hover( function () { $(".searchLinks").fadeIn( 500 ); }, function () { $(".searchLinks").fadeOut( 500 ); } ); });  

CSS

 #searchWrapper { position:relative; } #searchWrapper .searchLinks { position: absolute; z-index: 99999; top: 50px; background: #e7e7e7; right: -145px; display:none; padding:10px; } #searchWrapper .box { border:solid 1px #555; padding: 20px 0px; text-align:center; } 

你可以在这里看到它如何淡入，然后一旦你将鼠标hover在它上面就会逐渐消失。

http://jsfiddle.net/421g2cdh/7/

Answer 1

您必须使用stop()函数。

 jQuery(function($) { $("#searchWrapper").hover( function () { $(".searchLinks").stop(true,true).fadeIn( 500 ); }, function () { $(".searchLinks").stop(true,true).fadeOut( 500 ); } ); }); 

另外，如果你不希望在鼠标位于它和它的父节点之间时看到fadeOut，请减少.searchLinks的边距。 （填充顶部而不是顶部）

（见http://jsfiddle.net/421g2cdh/11/ ）

Answer 2

每次hover元素时，必须停止匹配元素上当前运行的动画。

使用stop()

尝试：

  jQuery(function($) { $("#searchWrapper").hover( function () { $(".searchLinks").stop().fadeIn( 500 ); }, function () { $(".searchLinks").stop().fadeOut( 500 ); } ); }); 

DEMO

Answer 3

使用stop() ，你可以使用in / outhover方法处理程序：

 jQuery(function ($) { $("#searchWrapper").hover( function () { $(".searchLinks").stop().fadeToggle(500); }); }); 

的jsfiddle

fadeToggle（）

Answer 4

以上都没有为我工作，但我找到了一个只使用.unbind()触发一次的解决方案：

 $("#sidebar").unbind().on('mouseenter', function() { console.log('mouse entered sidebar'); });