javascript - sirve - saber si un elemento tiene un atributo jquery

jQuery cambia el atributo css lentamente

Question

Tengo este codigo

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

cambia el color de fondo del enlace, pero quiero que lo cambie lentamente, algo así como el efecto de atenuación, pero para este caso.

Answer 1

Desea utilizar animate() , pero también necesita el complemento de color para jQuery .

Con el complemento 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 2

Puede que sea muy tarde para responder a esta pregunta, pero todavía quería proporcionar una solución alternativa que funcionara para mí. (Las dos respuestas proporcionadas anteriormente funcionarán). Usé CSS Animation y eso me funcionó mejor que jquery animate en algunos otros casos también. Puedes probar lo siguiente:

// ''bcolor'' es el nombre del fotograma clave de animación 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;}
}

Answer 3

Puedes lograr lo mismo con las transiciones de 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;
}