Question

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

相关网页：

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

问题的屏幕截图：

问题：

当您查看该页面时，您会在页面顶部看到一个工具栏类型的短划线，但位于网站标题下方（其中显示的是“CUREkids”）。

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

问题是，如果你在工具栏上鼠标移动过快，就会出现一个棘手的故障，导致jQuery规则以一种奇怪的方式触发，导致标签从后面出来，但是回到工具栏的上方

其他详细信息：

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

我的想法

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

感谢所有帮助。

Answer 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.

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

修改

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

Answer 2

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

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

..而不是马上打电话给   onMouseOver函数，它等到   用户的鼠标放慢了足够的速度   在打电话之前。

为什么呢？延迟或阻止   意外射击动画或   ajax电话。简单的超时工作   小区域，但如果你的目标区域   它很大，无论如何都可以执行   意图。

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

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

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

Answer 3

正在发生的事情是，鼠标悬停时启动的jquery动画功能在mouseout事件被触发时没有完成...因此，z-index更改之前的100ms延迟假设发生在“show”部分在mouseout“hide”函数上更改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版本中修复它，我会感到惊讶。

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

4 个答案: