jQuery change css attribute slowly

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

You want to use animate(), but you also need the Color Plugin for jQuery.

With the color plugin included, the following code works well:

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

May be its very late for answering this question, but still wanted to provide an alternate solution that worked for me. (Both the answers provided earlier will work). I used CSS Animation and that worked better for me than jquery animate in few other cases as well. You can try the below -

// 'bcolor' is animation keyframe name defined later

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