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:

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

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

Katso myös