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

Question

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

有问题的页面：

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

问题截图：

< img src="https://i.sstatic.net/ipsX5.jpg" alt="ck-dash-tab.jpg">

问题：

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

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

问题是，如果您将鼠标移过工具栏太快，就会出现一个螺旋故障，导致 jQuery 规则以一种奇怪的方式触发，导致选项卡从后面出来，但又回到工具栏的上方。

其他详细信息：

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

我的想法

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

感谢所有帮助。

Answer 1

在为 mouseleave 定义的函数中，添加 .stop(true, true)，然后将 z-index 更改回 -1。

$("#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") 并替换悬停方法内的引用，它将运行得更快。

Answer 2

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

仅默认用法就可以修复鼠标触发/排队动画的快速移动。

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

为什么？为了延缓或阻止
意外触发动画或
阿贾克斯调用。简单的超时适用于
小区域，但如果您的目标区域
很大，它可能会执行，无论
意图。

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

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

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

Answer 3

发生的情况是，当 mouseout 事件被触发时，在 mouseover 上启动的 jquery animate 函数尚未完成...因此 z-index 更改之前的 100 毫秒延迟应该发生在动画的“显示”部分结束在鼠标移开“隐藏”功能上更改 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();

Answer 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 版本中的问题，我会感到惊讶。