2011-11-30 10 views
10

Sto cercando uno script jQuery o un plugin di terze parti per jQuery, che può creare un effetto di dissolvenza in entrata/uscita basato su "da colore" e "da colorare". Esempio di come la vedo io:jQuery - Come sfumare in entrata/uscita da un colore all'altro? (possibile plugin di terze parti per 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 

risposta

15

jQuery UI estende il metodo di jQuery animate per includere l'animazione di colore. È quindi possibile fare qualcosa di simile:

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

Ecco un working example.

+0

non funziona nel mio caso:/ –

+0

Hai incluso l'interfaccia utente di jQuery? Assicurati di includerlo dopo la libreria jQuery di base. Aggiorna la tua domanda con un po 'di codice o fai un jsfiddle per dimostrare il problema. –

+0

@JamesAllardice L'animazione avviene così velocemente che è difficile persino notarlo. È possibile rallentare l'animazione in dissolvenza in modo che possa essere vista più chiaramente? –

3

Il jQuery UI animate function lo farà.

See here for jsFiddle.

+0

un codice di esempio potrebbe aiutarmi ancora di più :) –

+0

jQuery 'animate' non animerà i colori a meno che non si includa anche l'interfaccia utente di jQuery, che la estende. Vedi la mia risposta. –

+0

@Commando Vedi aggiornamento. –

0

Ecco i miei 2 centesimi vale la pena - un jsFiddle di un pulsante a pulsazione continua, attivato quando il documento carica.

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

Va detto che questo richiede l'interfaccia utente di jQuery. –

10

Non hai bisogno di un altro plugin. Esempio:

jQuery

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

CSS

selector { 
    transition: color .3s; 
} 

Questo funziona bene (e senza rallentare il sito web).

+2

Risparmia un'ora e usa questo! – KryptoniteDove

+0

Ancora più corto: $ (selettore) .css ("transition", "color .3s"). Css ("color", "blue"); – Mirko