2011-11-30 9 views
10

Estoy buscando un script jQuery o un complemento de terceros para jQuery, que puede crear un efecto de fundido de entrada/salida basado en "del color" y "al color". Ejemplo de cómo lo veo:jQuery: cómo desvanecerse de un color a otro? (posible complemento de terceros para jQuery?)

$(selector).fadeColor({ 
    from: "#900", // maroon-red color 
    to: "#f00", // blood-red color 
}, 3000); // last argument is the time interval, in milliseconds in this particular case it's based for 3 seconds 

Respuesta

15

jQuery UI se extiende el método de jQuery animate para incluir animación color. A continuación, puede hacer algo como:

$("#someId").animate({backgroundColor: "#ff0000" }); 

Aquí hay una working example.

+0

no funciona en mi caso:/ –

+0

¿Ha incluido jQuery UI? Asegúrese de incluirlo después de la biblioteca central jQuery. Actualice su pregunta con algún código, o haga un jsfiddle que demuestre el problema. –

+0

@JamesAllardice La animación sucede tan rápido que es difícil notarla. ¿Es posible ralentizar la animación de desvanecimiento para que se pueda ver con mayor claridad? –

3

La interfaz de usuario jQuery animate function lo hará.

See here for jsFiddle.

+0

un código de ejemplo me ayudaría aún más :) –

+0

jQuery's 'animate' no animará los colores a menos que también incluya jQuery UI, que lo amplía. Ver mi respuesta –

+0

@Commando Ver la actualización. –

0

Aquí está mi valor de 2 centavos - un jsFiddle de un botón continuamente pulsante, que se activa cuando se carga el documento.

Demo here

function fadeDivIn(){ 
    $("#div").animate({backgroundColor: "#ed3" }, 4000, function(){fadeDivOut();}); 
} 

function fadeDivOut(){ 
    $("#div").animate({backgroundColor: "#3de" }, 4000, function(){fadeDivIn();}); 
} 

$(document).ready(function(){ 
    fadeDivIn(); 
}); 
+1

Se debe decir que esto requiere jQuery UI. –

10

No es necesario otro plugin. Ejemplo:

jQuery

$(selector).css("color", "blue"); 

CSS

selector { 
    transition: color .3s; 
} 

Esto funciona muy bien (y sin ralentizar el sitio web).

+2

¡Ahórrate una hora y úsala! – KryptoniteDove

+0

Aún más corto: $ (selector) .css ("transición", "color .3s"). Css ("color", "azul"); – Mirko

Cuestiones relacionadas