jQuery change css attribute slowly

Question

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.

Answer 1

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