javascript - 当我拖动光标时动画会卡住

Question

我是一个 super 新手(我上周在 codeAcademy 上学习了 html、css、jQuery)，所以这可能是一个愚蠢的问题。 但是，当我在以下示例中将光标快速拖动到 block 上时，动画似乎会粘住，换句话说， block 保持不透明。大家能帮帮我吗？我的代码链接如下。预先感谢您。

http://jsfiddle.net/ivanjsfiddle00/eFShc/1/

$(document).ready(function() {
$(".button").hover(function() {
    $(this).filter(':not(:animated)').animate({"opacity": 1 }) 
}, function() {
    $(this).filter(':not(:animated)').animate({"opacity": 0.5 })
});
});

编辑: 谢谢你们。用 stop(true) 替换 filter(':not(:animated)') 有效。

Answer 1

您需要使用stop()来清除事件之间的动画队列。这也会使您的 filter(':not(:animated)') 变得多余。

$(".button").hover(function () {
    $(this).stop(true).animate({
        "opacity": 1
    })
}, function () {
    $(this).stop(true).animate({
        "opacity": 0.5
    })
});

Example fiddle