Animoitu valitsin

Valitsin :animated valitsee elementit, jotka ovat tällä hetkellä mukana animaatiossa. Jos käytät mukautettua jQuery-kokoelmaa ilman vaikutusmoduulia, niin :animated:n käyttö aiheuttaa virheen. Koska :animated ei kuulu CSS-spesifikaatioon, on nykyaikaisissa selaimissa suorituskyvyn parantamiseksi parempi suodattaa elementit aluksi käyttämällä puhdasta css-valitsinta ja sitten soveltaa .filter(':animated').

Syntaksi

Näin valitsemme elementit, jotka ovat mukana animaatiossa:

$(':animated');

Esimerkki

Laitetaan niin, että yhdessä neliöistä käynnistetään animaatio funktiolla animateIt. Joka kerta kun napsautetaan painiketta, jossa on #change, animoidun neliön väri vaihtuu vihreästä punaiseksi ja takaisin - poistamalla ja lisäämällä luokan colored metodilla 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();

Katso myös

metodi slideToggle,
joka näyttää piilotetut elementit ja piilottaa näytetyt
metodi toggleClass,
joka lisää tai poistaa CSS-luokan
metodi find,
joka etsii elementtejä jo löydettyjen sisältä