jQuery atributo css cambio lentamente

Question

tengo este código

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

que cambia el color de fondo de la relación, pero yo quiero que cambie lentamente, un poco como efecto de fundido, pero para este caso.

Answer 1

Usted puede lograr lo mismo con las transiciones CSS3. El resultado será casi el mismo.

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

Answer 2

Quiere usar animate(), pero también necesita el Color Plugin for jQuery.

Con el plug-in de color incluido, el siguiente código funciona bien:

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

Answer 3

Puede ser que sea muy tarde para responder esta pregunta, pero aún así quería proporcionar una solución alternativa que funcionó para mí. (Ambas respuestas proporcionadas anteriormente funcionarán). Utilicé CSS Animation y eso funcionó mejor para mí que jquery animar en algunos otros casos también. Usted puede intentar el siguiente -

// 'bcolor' es la animación de fotogramas clave nombre definido más adelante

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