Question

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

以下是我正在使用的HTML标记：

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

如您所见，这是一个简单的标题，其中有一个按钮，名为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);
    });
});

如您所见，我在backgroundColor函数中使用了.animate()属性。 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的问题。添加

背景：＃27AEFF;

到.header_label以及.header似乎解决了这个问题。

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

在动画之前，Div背景颜色闪烁白色

1 个答案: