jQuery ändert das CSS-Attribut langsam

Ich habe diesen Code

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

Es ändert die Hintergrundfarbe des Links, aber ich möchte, dass es sich langsam ändert, ähnlich wie bei einem Fade-Effekt, aber für diesen Fall.

Sie können dasselbe mit CSS3-Übergängen erreichen. Das Ergebnis wird fast genau dasselbe sein.

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

Sie verwenden möchten animate()aber Sie brauchen auch die Farb-Plugin für jQuery.

Mit dem enthaltenen Farb-Plugin funktioniert der folgende Code gut:

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

Vielleicht ist es sehr spät für die Beantwortung dieser Frage, aber ich wollte trotzdem eine alternative Lösung anbieten, die für mich funktioniert hat. (Beide Antworten, die zuvor gegeben wurden, funktionieren). Ich habe CSS-Animation verwendet, und das hat für mich auch in einigen anderen Fällen besser funktioniert als jquery animate. Sie können Folgendes versuchen –

// ‘bcolor’ ist der später definierte Keyframe-Name der Animation

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