3

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

有问题的页面：

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

问题截图：

ck-dash-tab.jpg

问题：

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

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

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

额外细节：

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

我的想法

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

感谢所有帮助。

4

4 回答 4

2

在为 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")并替换悬停方法内部的引用，它会更快地工作。

于 2010-10-19T02:47:37.117 回答
1

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

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

..不是立即调用 onMouseOver 函数，而是等到用户的鼠标速度足够慢后再进行调用。

为什么？延迟或防止意外触发动画或 ajax 调用。简单的超时适用于小区域，但如果您的目标区域很大，则无论意图如何，它都可能执行。

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

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

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

于 2010-10-18T22:07:09.887 回答
0

发生的事情是当 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();

于 2010-10-15T10:02:37.777 回答
0

在您的标记中，将锚元素移动到#what-tagdiv-element 之外#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 版本中也没有解决，我会感到惊讶。

于 2010-10-17T16:59:55.913 回答