jQuery change css attribute slowly

Question

I have this code

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


        

Answer 1

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