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