javascript - 悬停在 div 上有时不会变回原来的颜色

Question

我有一个 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

$(this).css('background-color') 在您将鼠标悬停在元素上时获取该元素的颜色。如果在它仍在执行动画时将鼠标悬停在它上面，颜色将介于 COLOR_A 和 COLOR_B 之间。

您想存储初始值以便您可以重新使用它，而不管动画的当前状态如何。

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

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

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

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