jQuery慢慢改变css属性

Question

我有这个代码

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

它改变了链接的背景颜色,但是我想让它慢慢改变它,有点像淡化效果,但对于这种情况.

Answer 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;
}

Answer 2

你想使用animate(),但你也需要jQuery的Color Plugin.

使用颜色插件,以下代码运行良好:

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