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:

javascript$(':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:

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

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

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

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

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

animateIt();

Vedi anche