jQuery: animazione colore

Fra le animazioni previste dal core di jQuery allo stato attuale non è possibile laovrare con il colore,

per esempio per modificare il colore di sfondo. Per raggiungere questo effetto è necessario fare ricorso a jQuery UI

Prepariamo una pagina con il collegamento al tema base a jQuery e a jQuery UI:

<link rel=”stylesheet” href=”http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css” />
<script src=”http://code.jquery.com/jquery-1.8.2.js”></script>
<script src=”http://code.jquery.com/ui/1.9.0/jquery-ui.js”></script>

Inseriamo nell’html un link trasformato in pulsante e un div sul quale applicare l’effetto:

<a href=”#” id=”button” class=”ui-state-default ui-corner-all”>Cambia colore</a>
<div id=”effect”><p>Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.</p></div>

Lo stile ci servirà solo per determinare le dimensioni:

<style>
#button { padding: .5em 1em; text-decoration: none; }
#effect { width: 240px; height: 135px; padding: 0.4em; background: #fff; }
</style>

Al caricamento potremo associare il click sul nostro bottone che animerà il div modificando il colore di sfondo:

$( “#effect” ).animate({backgroundColor: “#aa0000″,color: “#fff”}, 1000 );

Se poi vogliamo ripristinare la situazione possiamo usare una variabile state e gestire tutto nello stesso click:

$(function() {
var state = true;
$( “#button” ).click(function() {
if ( state ) {$( “#effect” ).animate({backgroundColor: “#aa0000″,color: “#fff”}, 1000 );}
else {$( “#effect” ).animate({backgroundColor: “#fff”,color: “#000″}, 1000 );
}
state = !state;
});
});

L’esempio