[英]jQuery change css attribute slowly
我有这个代码
$('#uiAdminPanelMenu li a').hover( function(){
$(this).css('background-color', '#D3E1FA';
},
function(){
$(this).css('background-color', '#F4F4F4');
});
它改变了链接的背景颜色,但是我想让它慢慢改变它,有点像淡化效果,但对于这种情况。
你可以用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;
}
你想使用animate()
,但你也需要jQuery的Color Plugin 。
使用颜色插件,以下代码运行良好:
$('#uiAdminPanelMenu li a').hover( function(){
$(this).animate({'background-color': '#D3E1FA'}, 'slow');
},
function(){
$(this).animate({'background-color': '#F4F4F4'}, 'slow');
});
可能是回答这个问题的时间很晚,但仍然想提供一个对我有用的替代解决方案。 (前面提供的答案都有效)。 我使用CSS动画,对于我来说比jquery动画效果更好,在其他一些情况下也是如此。 您可以尝试以下 -
//'bcolor'是稍后定义的动画关键帧名称
#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;}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.