Selektor animated

Der Selektor :animated wählt Elemente aus, die derzeit an einer Animation beteiligt sind. Wenn Sie eine benutzerdefinierte jQuery-Build ohne Effektmodul verwenden, wird die Verwendung von :animated einen Fehler verursachen. Da :animated nicht zur CSS-Spezifikation gehört, ist es für eine bessere Leistung in modernen Browsern besser, zuerst die Elemente mit einem reinen CSS-Selektor zu filtern und dann .filter(':animated') anzuwenden.

Syntax

So wählen wir Elemente aus, die an Animationen beteiligt sind:

javascript$(':animated');

Beispiel

Lassen Sie uns einen der Quadrate mit der Funktion animateIt animieren. Bei jedem Klick auf die Schaltfläche mit der ID #change ändert sich die Farbe des animierten Quadrats von Grün zu Rot und zurück - durch Entfernen und Hinzufügen der Klasse colored mit der Methode 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();

Siehe auch