Селектор animated

Селекторот :animated ги избира елементите кои во моментот се вклучени во анимација. Ако користите сопствена jQuery сборка без модул за ефекти, тогаш употребата на :animated ќе предизвика грешка. Бидејќи :animated не припаѓа на CSS спецификацијата, за подобрување на перформансите во модерни прелистувачи подобро е прво да се филтрираат елементите со употреба на чист css-селектор, а потоа да се примени .filter(':animated').

Синтакса

Вака ги избираме елементите вклучени во анимација:

javascript$(':animated');

Пример

Ајде да направиме така што на еден од квадратите да се стартува анимација со помош на функцијата animateIt. При секој клик на копчето со #change бојата на анимираниот квадрат ќе се менува од зелена во црвена и обратно - преку отстранување и додавање на класата colored со методот 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();

Погледнете исто така