De animated selector

De selector :animated selecteert elementen die op dit moment betrokken zijn bij een animatie. Als je een aangepaste jQuery build gebruikt zonder de effects module, dan zal het gebruik van :animated een fout veroorzaken. Omdat :animated niet behoort tot de CSS specificatie, is het voor betere prestaties in moderne browsers beter om eerst te filteren met een pure css-selector, en dan pas .filter(':animated') toe te passen.

Syntaxis

Zo selecteren we elementen die betrokken zijn bij een animatie:

$(':animated');

Voorbeeld

Laten we ervoor zorgen dat op een van de vierkanten een animatie wordt gestart met de functie animateIt. Bij elke klik op de knop met #change zal de kleur van het geanimeerde vierkant veranderen van groen naar rood en terug - door het verwijderen en toevoegen van de klasse colored met de 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();

Zie ook

de methode slideToggle,
die verborgen elementen toont en getoonde verbergt
de methode toggleClass,
die een CSS klasse toevoegt of verwijdert
de methode find,
die elementen zoekt binnen reeds gevonden elementen