Javascript 当我拖动光标时，动画被粘住

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

编辑： 谢谢大家。使用stoptrue替换过滤器“：not:animated”已工作。

您需要使用stop清除事件之间的动画队列。这也使得过滤器“：not:animated”多余

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

---

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

---

在设置动画之前检测元素是否处于动画中

---

如果$this.is:animated return false，则添加；在编写动画代码之前

@ivanstackoverflow00，如果您想要比以前更相似的东西，请尝试在第一个函数中添加.stoptrue。

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

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