jQuery动画小故障：当鼠标快速移动到屏幕上时，函数以错误的顺序启动

注：我没有写有问题的剧本，是我的同事写的。只是自愿为我们提供一些信息。请原谅听起来像noob的不正确的术语或描述；我不是一个编写脚本的人，我是一个HTML/CSS的人

有问题的页面：

问题的屏幕截图：

问题：

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

当您将鼠标悬停在该工具栏的任何区域上时，左侧会有一个小的绿色选项卡，该选项卡会从其后面显示动画（该选项卡上有问号）。单击时，该选项卡将切换打开描述性界面。到目前为止一切顺利

问题是，如果鼠标在工具栏上移动过快，就会出现一个异常的小故障，导致jQuery规则以一种奇怪的方式启动，导致选项卡从后面出来，但返回到工具栏的上方

其他详细信息：

该脚本的工作方式是，默认情况下，选项卡隐藏在工具栏后面，jQuery首先将其设置为离开工具栏的动画，然后更改z索引，使其实际位于工具栏元素上方，以获得最大可用性，并单击选项卡上的区域。所有这些都发生在鼠标上。鼠标移出时，会发生相反的情况（z索引更改为低于工具栏，然后将动画设置到其所在位置）

我的想法

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

---

非常感谢您的帮助。

当mouseover事件被触发时，mouseover上启动的jquery animate函数没有完成。。。因此，假设在动画的“显示”部分上发生z索引更改之前的100ms延迟，最终在鼠标输出“隐藏”功能上更改z索引之后发生。（希望有道理……）

所以试试这个。。。更改：

$("#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();});
    }
);

致：

---

重要的位是

$（“#what标记”）.clearQueue（）

在标记中，将锚元素

#what标记

移动到div元素

#curekids破折号

的外部，例如，在其正前方：

                :
                :
<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>
                :
                :

---

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

我所知道的解决这个问题的最佳方法，以及用各种选项（如毫秒间隔、超时、灵敏度等）控制行为的最佳方法是jQuery插件

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

…而不是立即打电话给 在mouseover函数中，它等待 用户的鼠标速度足够慢 在打电话之前

为什么?？推迟或阻止 意外触发动画或动画 ajax调用。简单的超时对你有用 小区域，但如果您的目标区域 如果是大的，则无论 意图

如果您只想停止排队，请查看以下文章：

---

在为mouseleave定义的函数上，添加

.stop（true，true）

，然后再将z索引更改回-1

$（“#什么标记”）.stop（true，true）.css（“z-index”，“-1”）

退房

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

我认为目前正在发生的是，在mouseenter回调函数启动之前，它将z-index设置为-1

编辑：

无关-您还应该考虑将jquery选择器缓存到变量中。您在这个悬停方法中调用了六次
$（“#what tag”）
。如果在hover方法上方定义一个变量，如下所示：
var$whatTag=$（“#what tag”）
并替换hover方法内部的引用，它将运行得更快。
Nope。无论如何，谢谢你。z索引位仍然出现，但它显然没有动画化。你是在firebug中测试的还是根据知识编写的？如果您测试了它，它是否成功地删除了浏览器中的漏洞？嗯。。。是的，我是根据前一阵子我自己也有同样问题的知识打出来的。。。但我可以把东西结合起来。也可以试试$（“#what tag”）.stop（）；只要读一下这个回答，是的
.stop（）
就是答案，但它必须是
.stop（true，true）
。唯一有效的原因是#curekids dash的左上角恰好与#mainContent的左上角在同一位置，并且#mainContent具有相对位置。如果这两个条件中的任何一个是假的，它都会被打破。太棒了——就像一个符咒。我还决定使用hoverIntent进行添加润色。我本来会给你答案的，但严格地说，Bryan向函数添加.stop（true，true）的解决方案非常有效，甚至不需要添加插件。但我们确实选择了将hoverIntent添加到common.js中，并在那里以及我们网站上的其他地方使用它。它确实为IMO的界面带来了更加完美的用户体验。谢谢你的建议！！不用担心，很高兴能帮上忙。我同意，hoverIntent会和我一起去体验美好的悬停体验
                :
                :
<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-dash {
  background:url("/img/curekids/ck-toggle-container.png") no-repeat scroll center center transparent;
  height:80px;
  position:relative;
  width:960px;
  z-index:2;
}