为什么这些 jquery 事件会同步触发？答案

【问题标题】：Why are these jquery events firing synchronously?为什么这些 jquery 事件会同步触发？
【发布时间】：2011-09-06 07:41:40
【问题描述】：

鉴于页面上有许多 '.hovertarget' div，下面的 mouseover/mouseout 事件似乎是同步触发的 - 即，如果您将鼠标从一项 (A) 快速移动到另一项 (B)，B 会淡出-in 在 A 淡出完成之前不会开始。如果您快速执行此操作，那么您将有一系列淡入/淡出播放几秒钟。 这不是我想要的行为。如何更改这一点，以使事件彼此独立？

我使用的是 jquery 1.6.2

$(".hovertarget").live('mouseover mouseout', function(event) {
    var child = $(event.target).find(".targetchild");
    if (event.type == 'mouseover') {
        child.fadeIn(200);
    } else {
        child.fadeOut(200);
    }
});

HTML 这适用于（按要求）：

    <div class="hovertarget" id="s1"><div class="targetchild"></div></div>
    <div class="hovertarget" id="s2"><div class="targetchild"></div></div>

【问题讨论】：

您是否尝试使用 .stop() 方法停止动画？
你试过用fadeTo吗，你也应该用delegate代替live。将 $(".hovertarget").live 更改为 $(".hovertarget").delegate 很简单，应该可以正常工作。同样在这种情况下，fadeTo 会更好地工作，因为它不会应用 display:none，否则您可能会得到那种抖动效果或其他一些不需要的效果。
@matt - 不会尝试。 live和delegate有什么区别？（我使用 live 是因为这些是动态添加的元素）。
@UpTheCreek 代表效率更高。它们的工作方式相同，因为它会在加载 DOM 后添加事件，但它只会扫描 DOM 的特定部分。实际上再次查看您的代码，您需要执行$(container).delegate(".hovertarget", ('mouseover mouseout', function(event) {...}) 之类的操作，但容器可以是主体，您希望尽可能集中注意力。因此，如果您有父容器，请使用它。所以你可以做$("body").delegate，还是比用live好。

标签： jquery

【解决方案1】：

如果之前的动画尚未完成，您将不得不停止它。除非您告诉它停止当前动画并清除队列，否则动画会进入队列。您可以像这样添加 stop() 命令：

$(".hovertarget").live('mouseover mouseout', function(event) {
    var child = $(event.target).find(".targetchild");
    if (event.type == 'mouseover') {
        child.stop(true, true).fadeIn(200);
    } else {
        child.stop(true, true).fadeOut(200);
    }
});

有关参数的更多信息，请参阅doc for .stop()。

【讨论】：

谢谢 - 现在看来已经足够了。但这对我来说并不完美，因为我不希望仅仅因为我在 div B 上开始淡入而取消 div a 的“淡出”动画。我假设每个 dom 对象都有自己的队列 -我觉得他们互相干扰很奇怪。再次感谢。
他们每个人都有自己独立的队列。您可能会调用 .stop() 超出您的意愿。向我们展示您的 HTML，我们可能会提供一些帮助。您是否 100% 确定 child 只是一个对象，并且不会超出您的预期？
奇怪。我已经添加了相关的 HTML（非常基本）。由于孩子是从 event.target 节点中选择的，我看不出我怎么会错误地选择多个。让我延长淡出时间来检查我不是在想象事情。
是的 - 我在想象交互：o 所以谢谢 - 这解决了它。唯一使它完美的事情是淡入将从当前的不透明度级别开始，而不是跳回到 0 - 这样当有未完成的淡出时淡入看起来会更平滑。
如果您不希望它在开始下一个动画之前跳到末尾，请将其更改为.stop(true, false)。阅读我引用的文档页面将对您有所帮助。

【解决方案2】：

使用

child.stop(true, true).fadeIn(200);

和

child.stop(true, true).fadeOut(200);

【讨论】：

我刚刚尝试过，但它似乎不起作用 - 如果您在两者之间滑动，它会导致事件（或至少任何动画）完全停止触发。