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）代替过滤器（'：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

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;

拖动光标时动画会粘住

3 个答案: