Az animated szelektor

A :animated szelektor azokat az elemeket választja ki, amelyek jelenleg animációban vesznek részt. Ha egyéni jQuery összeállítást használ effektusmodul nélkül, akkor a :animated használata hibát fog okozni. Mivel a :animated nem tartozik a CSS specifikációhoz, a jobb teljesítmény érdekében a modern böngészőkben jobb, ha először tiszta CSS-szelektorral szűrjük az elemeket, majd azután alkalmazzuk a .filter(':animated')-t.

Szintaxis

Így választjuk ki az animációban részt vevő elemeket:

javascript$(':animated');

Példa

Tegyük fel, hogy az egyik négyzeten animáció indul el a animateIt függvény segítségével. Minden alkalommal, amikor a #change gombra kattintunk, az animált négyzet színe zöldről pirosra vált és vissza - a colored osztály eltávolításával és hozzáadásával a toggleClass metódus segítségével:

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

Lásd még