JQuery изменяет атрибут css медленно

У меня есть этот код

$('#uiAdminPanelMenu li a').hover( function(){
    $(this).css('background-color', '#D3E1FA';
 },
 function(){
    $(this).css('background-color', '#F4F4F4');
});

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

Ответы

Ответ 1

Вы можете сделать то же самое с переходами CSS3. Результат будет почти таким же.

#uiAdminPanelMenu li a {
    background-color: F4F4F4;
    -webkit-transition: background-color 0.4s ease;
    -moz-transition: background-color 0.4s ease;
    -o-transition: background-color 0.4s ease;
    transition: background-color 0.4s ease;
}

#uiAdminPanelMenu li a:hover {
    background-color: D3E1FA;
}

Ответ 2

Вы хотите использовать animate(), но вам также нужен Цветной плагин для jQuery.

При включенном цветовом плагине следующий код работает хорошо:

$('#uiAdminPanelMenu li a').hover( function(){
    $(this).animate({'background-color': '#D3E1FA'}, 'slow');
 },
 function(){
    $(this).animate({'background-color': '#F4F4F4'}, 'slow');
});