jQuery animar a transparente

Question

$(".block li").hover(
    function(){ 
     $(this).animate({backgroundColor: "#000"}); 
    }, 
    function(){ 
     $(this).animate({backgroundColor: "#fff"}); 
    } 
); 

Necesita cambiar #fff a ningún color. La animación debería ocurrir desde #000 hasta transparent.

¿Alguna solución?

Answer 1

En lugar de cambiar el color de fondo, elimine ese atributo.

El código es tan simple como:

$("li").hover(
    function(){ 
     $(this).toggleClass('hover', 1000); 
    }, 
    function(){ 
     $(this).toggleClass('hover', 2000); 
    } 
); 

Ejemplo: http://jsfiddle.net/rdWTE/

Para que funcione, es necesario jQuery y jQuery UI. Hace exactamente lo que quería (¡excepto los colores)!

Los números en la secuencia de comandos jQuery representan la duración de la animación en milisegundos.

EDIT:

Uhm ... descubrí que toggleClass lata de errores de vez en cuando. Es mejor usar addClass al pasar el mouse y removeClass al salir.

Answer 2

¿Por qué no utilizar la etiqueta opacity CSS3?

Answer 3

Creo que necesita utilizar el color plugin.

Answer 4

Editar: He probado esto y funciona.

Crea dos clases. Uno con fondo: # 000 y uno con fondo: transparente;

Animar el toggleClass o removeClass para la clase de fondo # 000.

ejemplo:

jQuery('.block li').hover(function() { 
    $(this).toggleClass('blackClass', 'fast'); 
} 

CSS:

.blackClass { background: #000; } 

Answer 5

Esto puede requerir algún cambio en el código HTML y CSS (que podría tener lugar mediante la escritura si no tiene control directo de HTML/CSS)

Yo dividiría cada elemento '.block li' en dos elementos: uno que será el elemento de fondo que se puede animar con $ .fadeTo(), y otro elemento colocado encima que contendrá su contenido de primer plano y en el que puede llamar a $ .hover() con sus controladores.

Answer 6

Puede usar rgba(...) (see browser support here).

var elem = $('#foo')[0]; 

$({ 
    r: 0, 
    g: 0, 
    b: 0, 
    a: 1 
}).animate({ 
    a: 0 
}, { 
    step: function() { 
     elem.style.backgroundColor = 
      'rgba(' + 
       ~~this.r + ',' + ~~this.g + ',' + ~~this.b + ',' + 
       ~~(this.a*100)/100 + 
      ')'; 
    }, 
    duration: 1000 
});​ 

~~ es a los valores de suelo, de lo contrario va a terminar con cosas como rgba(0.1029302.... .

Answer 7

$ ("li bloque") se ciernen ( function() {$ (este) .animate ({backgroundColor: "# 000"});} , function() {$ (esto)animate ({backgroundColor: $ (this) .parent(). css ("backgroundColor")}); } );

Answer 8

Esto podría funcionar. Prepara un nuevo div con un color de fondo en MooOver, luego se desvanece y elimina el div en MooOut.

Example.

Example with list items over an image.

Buena suerte, espero que esto ayude.

Answer 9

I got a solution to this issue from this link

$('#test').animate({ 

backgroundColor: "#DFC21D", 

}, 1000, function() { 

$('#test').css("backgroundColor","transparent"); 

});