javascript - 拖动光标时动画卡住

Question

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

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
    })
});

示例小提琴

Answer 2

@Rory 似乎已经回答了最初的问题，但值得指出的是，另一种选择是使用 CSS 并使用:hover伪元素。

.button {
    float: left;
    margin: 1px;
    opacity: 0.5;
    display: inline-block;
    background-color: #757575;
    width: 50px;
    height: 50px;
}

.button:hover{
    background-color:#323a44;
}

Answer 3

if($(this).is(":animated")) return false;在你的动画代码之前检测元素是否在动画之前添加动画