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()，但你也需要Color Plugin for jQuery。

使用颜色插件，以下代码运行良好：

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

Answer 3

可能是回答这个问题的时间很晚，但仍然想提供一个对我有用的替代解决方案。 （前面提供的答案都有效）。我使用CSS动画，对于我来说比jquery动画效果更好，在其他一些情况下也是如此。您可以尝试以下 -

//'color'是稍后定义的动画关键帧名称

#uiAdminPanelMenu li a:hover {
    -webkit-animation-name: bcolor; 
    -webkit-animation-duration: 1s;   
    -webkit-animation-fill-mode: forwards;
    -moz-animation-name: bcolor;  
    -moz-animation-duration: 1s;   
    -moz-animation-fill-mode: forwards; 
    animation-name: bcolor;
    animation-duration: 1s;    
    animation-fill-mode: forwards;
}

@-webkit-keyframes shadeOn {
    from {background-color: #F4F4F4;}
    to {background-color: #D3E1FA;}
}
@-moz-keyframes shadeOn {
    from {background-color: #F4F4F4;}
    to {background-color: #D3E1FA;}
}
@keyframes shadeOn {
    from {background-color: #F4F4F4;}
    to {background-color: #D3E1FA;}
}