javascript - 动画前 div 背景颜色闪烁白色

Question

我有一个使用 jQuery、jQuery UI、jQuery UI 颜色插件、CSS 和 HTML 的动画标题按钮。可以在此处找到示例:http://jsfiddle.net/sNp5x/ .

以下是我使用的 HTML 标记:

<div class="header">
    <div class="header_label">
        Test
    </div>
</div>

如您所见，这是一个简单的 header ，其中有一个名为 header_label 的按钮。

这是我用来为 header_label div 设置动画的 jQuery:

$(document).ready(function () {
    $(".header_label").mouseenter(function () {
        $(".header_label").animate({
            borderLeftWidth: "8px",
            backgroundColor: "#2778ff"
        }, 300);
    });
    $(".header_label").mouseout(function () {
        $(this).animate({
            borderLeftWidth: "2px",
            backgroundColor: "#27AEFF"
        }, 300);
    });
});

如您所见，我在 .animate() 函数中使用了 backgroundColor 属性。 jQuery Color 插件可以实现这一点。

div元素的样式如下:

.header {
    height: 50px;
    background-color: #27AEFF;
}
.header_label {
    float: left;
    text-align: left;
    font-family: Arial;
    padding-top: 14px;
    margin-left: 0px;
    border: 2px solid black;
    height: 32px;
    padding-left: 7px;
    padding-right: 7px;
    text-decoration: none;
    color: black;
}

如您所见，当您将鼠标悬停在标题按钮上时，它会闪烁白色，然后变为其预期的颜色，#2778ff。此外，它只会在您第一次将鼠标悬停在 header_label 上时闪烁白色。

如何使 .header_label div 更改为预期的颜色而不闪烁白色？

感谢您的帮助。

Answer 1

似乎是 Chrome 独有的问题。添加

background:#27AEFF;

.header_label 和 .header 似乎可以解决这个问题。

我猜测发生这种情况的原因是，如果没有指定起始颜色，当您第一次滚动时，它不知道要从 更改什么颜色，因此默认为白色。