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:

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

<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();

Siehe auch

die Methode slideToggle,
die versteckte Elemente einblendet und sichtbare ausblendet
die Methode toggleClass,
die eine CSS-Klasse hinzufügt oder entfernt
die Methode find,
die Elemente innerhalb bereits gefundener sucht