在元素之间移动鼠标过快时出现jQuery悬停问题
Posted
技术标签:
【中文标题】在元素之间移动鼠标过快时出现jQuery悬停问题【英文标题】:jQuery hover problem when moving mouse too quickly between elements 【发布时间】:2011-11-17 18:18:09 【问题描述】:我在一个页面上重复了以下 html:
<div class="outer">
outer
<div class="inner">
inner
</div>
</div>
并拥有这个 jQuery:
$('.inner').hide();
$('.outer').hover(function(e)
$(this).children('.inner').show("slide",
direction: "right"
, 1000);
, function(e)
$(this).children('.inner').hide("slide",
direction: "right"
, 1000);
);
如您在此处看到的:http://jsfiddle.net/342q3/15/ 在 div 之间缓慢移动鼠标(等待动画完成)可达到一次仅显示一个内部 div 的预期效果。
但是,如果您在 div 之间快速移动鼠标,则所有内部 div 仍然可见。
我尝试过使用 stop() 函数,但没有成功。 如何防止内部 div 保持打开状态?
【问题讨论】:
我认为您很快(将更多内容添加到“内部”)必须将您的脚本完全更改为更“用户友好”的内容。 【参考方案1】:如果您在开始新动画(滑出)之前停止动画并使用find
而不是children
(不知道为什么它不适用于children
),它会按预期工作:
$('.inner').hide();
$('.outer').hover(function(e)
$(this).find('.inner').stop(true, true).show("slide",
direction: "right"
, 1000);
, function(e)
$(this).find('.inner').stop(true, true).hide("slide",
direction: "right"
, 1000);
);
http://jsfiddle.net/AVLdW/
【讨论】:
多么奇怪!我试过 .stop(true, true) 但用 .children - 我想知道为什么这不起作用...... 它必须与 children() 相关,仅在 DOM 下一层;我希望内部 div 在动画时被包裹在某些东西中 PS:这仍然存在一个错误:如果您将鼠标向下穿过几个 div,然后停在其中一个较低的 div 内,则上面的外部 div 会随着内部动画而调整大小,而将鼠标留在您停止的 div 仍然有一个可见的内部。【参考方案2】:尝试使用animation()
编写代码,这样您就可以随时stop()
并设置默认样式。
【讨论】:
【参考方案3】:Animate() 是你想要的函数,我用这个函数用这种语法编写了我的导航系统:
$("your-selecter").hover(function()
$(this).stop().animate(
backgroundPosition: '0 0'
, 600);
, function()
$(this).stop().animate(
backgroundPosition: '0 -100px'
, 600);
);
;
显然你不想改变你的BG位置,你会在里面叫你滑动功能,但它是这种概念。
【讨论】:
以上是关于在元素之间移动鼠标过快时出现jQuery悬停问题的主要内容,如果未能解决你的问题,请参考以下文章