Question

我有一个div列表，每个div都有不同的背景颜色。当我将鼠标悬停在它们中的任何一个上时，我希望它变为灰色，然后当我的鼠标离开元素时返回其原始颜色。以下是我用过的代码：

var originalColor;
$('.div-class-name').hover(     
    function() {
        originalColor = $(this).css('background-color');
        $(this).animate({
            backgroundColor: 'rgb(125,125,125)'
        }, duration);
    }, function() {
        $(this).animate({
            backgroundColor: originalColor
        }, duration);
    }
);

它可以动画背景变化。但是，即使我鼠标移出后，偶尔会有一个元素仍然会变成灰色，这让我觉得在鼠标悬停和鼠标移出时，originalColor正在被修改。有没有办法在第一个函数中设置变量并在第二个函数中获取它的值而不允许它在第一个仍在转换时悬停在另一个元素上时被破坏？（这是我的假设，为什么有时颜色不会淡化回原来的颜色）

Answer 1

使用.stop( [clearQueue ] [, jumpToEnd ] )

停止匹配元素上当前正在运行的动画。

$('.div-class-name').hover(function () {
    originalColor = $(this).css('background-color');
    $(this).stop(true, true).animate({
        backgroundColor: 'rgb(125,125,125)'
    }, duration);
}, function () {
    $(this).stop(true, true).animate({
        backgroundColor: originalColor
    }, duration);
});

Answer 2

当您将鼠标悬停在元素上时，

$(this).css('background-color')正在访问该元素的颜色。如果你在做动画时将鼠标悬停在它上面，颜色将介于COLOR_A和COLOR_B之间。

您希望存储初始值，以便您可以重复使用它，无论动画的当前状态如何。

选项2 ：请参阅@Tushar Gupta关于使用.stop立即停止动画的答案。颜色可以使用.stop(true, true)立即捕捉到动画的“目的地”。

选项3：考虑将“样式”保留在“样式表”中 - 这更符合逻辑。即使不使用javascript，您can also use transitions也可以执行动画：

a {
    color: #F00;
    transition: color 0.5s linear;
}
a:hover {
    color: #000;
}

请注意，javascript动画仍有其用途。但对于简单的彩色动画，CSS就足够了。

将鼠标悬停在div上有时不会变回原始颜色

2 个答案: