Selettore animated

Il selettore :animated seleziona gli elementi che sono attualmente coinvolti in un'animazione. Se si utilizza una build jQuery personalizzata senza il modulo degli effetti, l'uso di :animated causerà un errore. Poiché :animated non fa parte delle specifiche CSS, per migliorare le prestazioni nei browser moderni è meglio filtrare prima gli elementi utilizzando un selettore CSS puro, e poi applicare .filter(':animated').

Sintassi

In questo modo selezioniamo gli elementi coinvolti in un'animazione:

$(':animated');

Esempio

Facciamo in modo che su uno dei quadrati venga avviata un'animazione utilizzando la funzione animateIt. Ad ogni click sul pulsante con #change il colore del quadrato animato cambierà da verde a rosso e viceversa - tramite rimozione e aggiunta della classe colored con il metodo toggleClass:

<button id="change">change</button>

<div></div>
<div id="test"></div>

div {
	background: green;
	border: 1px solid #AAA;
	width: 80px;
	height: 80px;
	margin: 0 5px;
	float: left;
}
div.colored {
	background: red;
}

$('#change').click(function() {
	$('div:animated').toggleClass('colored');
});

function animateIt() {
	$('#test').slideToggle('slow', animateIt);
}

animateIt();

Vedi anche

metodo slideToggle,
che mostra gli elementi nascosti e nasconde quelli visibili
metodo toggleClass,
che aggiunge o rimuove una classe CSS
metodo find,
che cerca elementi all'interno di quelli già trovati