jQuery缓慢地改变css属性 [英] jQuery change css attribute slowly

问题描述

我有这样的代码

  $（'＃uiAdminPanelMenu li a'）。hover（function（）{
 $（this）.css（'background-color'，'＃D3E1FA'; 
}，
 function（）{
 $（this）.css（'background-color'， '＃F4F4F4'）; 
}）; 
  

它改变链接的背景颜色，但我希望它能够慢慢地改变它，有点像淡入淡出效果，但对于这种情况。 您可以完成相同的操作

  #uiAdminPanelMenu li a {
 background-color：CSS3转换的结果，结果几乎完全相同。 ：F4F4F4; 
 -webkit-transition：背景色0.4s缓动; 
 -moz-transition：背景色0.4s缓动; 
 -o-transition：背景色0.4s缓动; 
 transition：background-color 0.4s ease; 
} 
 
 #uiAdminPanelMenu li a：hover {
 background-color：D3E1FA; 
} 
  

I have this code

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

it changes the background color of the link, but I want it to change it slowly, kinda like fade effect, but for this case.

解决方案

You can accomplish the same thing with CSS3 transitions. The result will almost be the exact same.

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

这篇关于jQuery缓慢地改变css属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！