hover动画上的jQuery多次触发
我试图弄清楚为什么我的hoverfunction表现得很奇怪。 当您将鼠标hover在div上时,另一个div变为可见。 但是,当我将光标向下移动到可见的div时,它会淡出并再次淡入。 这不应该发生,应该保持可见,直到我的光标离开主容器。
这是我的代码。
HTML
Hover here!
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/
您必须使用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/ )
每次hover元素时,必须停止匹配元素上当前运行的动画。
使用stop()
尝试:
jQuery(function($) { $("#searchWrapper").hover( function () { $(".searchLinks").stop().fadeIn( 500 ); }, function () { $(".searchLinks").stop().fadeOut( 500 ); } ); });
DEMO
使用stop()
,你可以使用in / outhover方法处理程序:
jQuery(function ($) { $("#searchWrapper").hover( function () { $(".searchLinks").stop().fadeToggle(500); }); });
的jsfiddle
fadeToggle()
以上都没有为我工作,但我找到了一个只使用.unbind()
触发一次的解决方案:
$("#sidebar").unbind().on('mouseenter', function() { console.log('mouse entered sidebar'); });