Блог

У меня есть анимированная кнопка заголовка, которая использует jQuery, jQuery UI, плагин jQuery UI color, CSS и HTML. Пример можно найти здесь: http://jsfiddle.net/sNp5x /.

Ниже приведена разметка HTML, которую я использую:

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

Как вы можете видеть, это простой заголовок, внутри которого есть кнопка called header_label .

Вот jQuery, который я использую для анимации header_label div:

 $(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 на его предполагаемый цвет, не мигая белым?

Спасибо за вашу помощь.

Похоже, это проблема только для Chrome. Добавление

фон: #27AEFF;

похоже, что .header_label, а также .header исправляют это.

Я предполагаю, почему это происходит, так это то, что без указания начального цвета он не знает, какой цвет менять при первом опрокидывании, и поэтому по умолчанию используется белый.