jQuery 动画故障：当鼠标快速移动时，函数以错误的顺序触发

Posted 2023-05-08

【中文标题】jQuery 动画故障：当鼠标快速移动时，函数以错误的顺序触发

【英文标题】：jQuery animation glitch: functions fire in wrong order when mousing across to quickly

【发布时间】：2011-04-22 23:01:52

【问题描述】：

注意：有问题的剧本不是我写的，是我的同事写的。只是自愿为我们提供一些意见。请原谅听起来像菜鸟的不正确的术语或描述；我不是脚本专家，我是 html/CSS 专家。

相关页面：

http://cure.org/curekids/kenya/2010/02/joseph_muchiri/

问题截图：

问题：

当您查看页面时，您会在页面顶部看到一个类似破折号的工具栏，但就在网站标题下方（它的标题是“CUREkids”）。

当您将鼠标悬停在该工具栏的任何区域上时，左侧会出现一个绿色的小标签，它会从它后面动画出来（它上面带有问号的部分）。单击时，选项卡将打开一个描述性的Slidedeck 界面。到目前为止一切都很好。

问题在于，如果您将鼠标移过工具栏的速度过快，则会出现一个棘手的故障，导致 jQuery 规则以一种奇怪的方式触发，导致选项卡从后面出来，但又回到工具栏的上方.

其他详情：

脚本的工作方式是选项卡默认隐藏在工具栏后面，jQuery 首先将其设置为离开工具栏的动画，然后更改 z-index 以使其实际位于工具栏的顶部元素以获得最大的可用性和选项卡上的单击区域。这一切都发生在 mouseOver 上。在 mouseOut 上发生相反的情况（z-index 更改为低于工具栏，然后以动画方式返回到它所在的位置）。

我的想法

我认为脚本的编写方式肯定存在问题，可以对其进行调整，以便当 mouseOver 事件发生得如此之快时不会导致重叠错误。

感谢所有帮助。

【参考方案1】：

在您为 mouseleave 定义的函数上，在将 z-index 改回 -1 之前添加 .stop(true, true)。

$("#what-tag").stop(true, true).css("z-index", "-1");

查看http://api.jquery.com/stop/

第一个 true 传递给 .stop(true, true) 将删除所有排队的动画。第二个true 是这种情况下的关键——它基本上会跳转到您为 mouseenter 定义的函数的末尾并立即触发其回调。在这种情况下，通过使用.stop(true, true)，您可以确保 z-index 在设置为 -1 之前始终设置为 1。

我认为目前正在发生的事情是它在 mouseenter 回调函数触发之前将 z-index 设置为 -1。

编辑：

不相关 - 您还应该考虑将 jquery 选择器缓存到变量中。您在此悬停方法中调用了六次$("#what-tag")。如果在悬停方法上方定义一个变量，如下所示：var $whatTag = $("#what-tag") 并替换悬停方法内部的引用，它会更快地工作。

【讨论】：

优秀 - 工作就像一个魅力。还决定使用 hoverIntent 来增加抛光。

【参考方案2】：

我所知道的解决此问题并使用各种选项（例如以毫秒为单位的间隔、超时、灵敏度等）控制行为的最佳方法是 jQuery 插件 hoverIntent。

仅默认用法单独修复了鼠标触发/排队动画的快速移动。

..而不是立即调用 onMouseOver 函数，它一直等到 用户的鼠标速度足够慢 在拨打电话之前。

为什么？延迟或阻止 意外触发动画或 ajax 调用。简单的超时适用于 小区域，但如果您的目标区域 很大，它可以执行而不管 意图。

如果您只想停止排队，请查看这些文章/帖子：

http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup

http://css-tricks.com/full-jquery-animations/

【讨论】：

我会给你答案，但严格来说，Bryan 在函数中添加 .stop(true, true) 的解决方案可以完美运行，甚至无需添加插件。但我们确实选择将 hoverIntent 添加到我们的 common.js 中，并在那里使用它以及我们网站上的其他地方。它确实为 IMO 界面带来了更精致的用户体验。谢谢你的建议！！

不用担心，很高兴能为您提供帮助。我同意，hoverIntent 和我一起去那里获得良好的悬停体验

【参考方案3】：

发生的事情是当 mouseout 事件被触发时，在 mouseover 上启动的 jquery animate 函数没有完成......因此，z-index 更改之前的 100 毫秒延迟假设发生在“显示”部分在mouseout“隐藏”功能上更改z-index后，动画最终会发生。 （希望这是有道理的......）

所以试试这个...改变：

$("#curekids-dash").hover(function() 
        $("#what-tag").show();
        $("#what-tag").animate(left: "-13", 100, "linear", function() $("#what-tag").css("z-index", "1");); 
    , function() 
        $("#what-tag").css("z-index", "-1");
        $("#what-tag").animate(left: "10", 100, "linear", function() $("#what-tag").hide(););
    
);

到：

$("#curekids-dash").hover(function() 
        $("#what-tag").show();
        $("#what-tag").animate(left: "-13", 100, "linear", function() $("#what-tag").css("z-index", "1");); 
    , function() 
        $("#what-tag").clearQueue();
        $("#what-tag").css("z-index", "-1");
        $("#what-tag").animate(left: "10", 100, "linear", function() $("#what-tag").hide(););
    
);

重要的一点是$("#what-tag").clearQueue();

【讨论】：

不。不管怎么说，还是要谢谢你。 z-index 位仍然存在，但它显然没有动画出来。你是在萤火虫中测试过的还是只是根据知识写的？如果您对其进行了测试，它是否成功删除了浏览器中的 blip？

嗯...是的，我是根据不久前自己遇到同样问题的知识输入的...但我可能会合并一些东西。也许也可以尝试 $("#what-tag").stop();

看看这个回复，是的.stop() 是答案，但它必须是.stop(true, true)。

【参考方案4】：

在您的标记中，将锚元素 #what-tag 移到您的 div 元素 #curekids-dash 之外，例如，就在它的前面：

                :
                :
<a class="toggle-trigger" id="what-tag" href="#">?</a>
<div id="curekids-dash">
    <a id="curekids-home-link" href="/curekids">CUREkids<span class="hover-icon">(return to CUREkids home)</span></a>

    <h1 id="helpChildNow"><a class="curekids-donate-link" href="https://secure.cure.org/curekids/donate?cause_id=5">Help <span id="childName">Joseph</span> Now</a></h1>
                :
                :

在curekids.css 的第24 行，为选择器#curekids-dash 添加属性z-index: 2;，使整个规则如下：

#curekids-dash 
  background:url("/img/curekids/ck-toggle-container.png") no-repeat scroll center center transparent;
  height:80px;
  position:relative;
  width:960px;
  z-index:2;

这解决了 FF 3.6 中的问题，如果它在 IE、Webkit 和更早的 FF 版本中也没有解决，我会感到惊讶。

【讨论】：

这行得通的唯一原因是因为#curekids-dash 的左上角恰好与#mainContent 的左上角位于同一位置，并且#mainContent 具有相对位置。如果其中任何一个条件不成立，它就会中断。