Question

鉴于页面上有多个'.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>

Answer 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()。

Answer 2

使用

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

和

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

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

2 个答案: