:animated1.2
Соответствует элементам, которые в данный момент участвуют в анимации.
Примеры использования:
$('.lBox:animated')
| вернет все элементы класса lBox, которые в данный момент участвуют в анимации.
|
$('div.lBox:animated')
| вернет все div-элементы класса lBox, которые в данный момент участвуют в анимации.
|
Селектор :animated является надстройкой библиотеки jQuery, а не частью официальной css спецификации (как большинство других селекторов). Поэтому, при поиске, jQuery не сможет использовать быструю нативную функцию querySelectorAll(). Поэтому, для лучшей производительности рекомендуется в начале сузить круг искомых элементов, и уже среди них искать анимированые элементы с помощью .filter():
// сузим круг поиска анимированных элементов до всех элементов с классом some-hint
// и уже среди них найдем анимированные в данный момент элементы
$( '.some-hint' ).filter( ':animated' );
В действии
При нажатии на кнопку, найдем и выделим div-элемент, который в текущий момент участвует в анимации:
~lt~!doctype html~gt~
~lt~html lang="en"~gt~
~lt~head~gt~
~lt~meta charset="utf-8"~gt~
~lt~title~gt~animated demo~lt~/title~gt~
~lt~style~gt~
div {
background: yellow;
border: 1px solid #AAA;
width: 80px;
height: 80px;
margin: 0 5px;
float: left;
}
div.colored {
background: green;
}
~lt~/style~gt~
~lt~script src="http://code.jquery.com/jquery-1.9.1.js"~gt~~lt~/script~gt~
~lt~/head~gt~
~lt~body~gt~
~lt~button id="run"~gt~Run~lt~/button~gt~
~lt~div~gt~~lt~/div~gt~
~lt~div id="mover"~gt~~lt~/div~gt~
~lt~div~gt~~lt~/div~gt~
~lt~script~gt~
$( '#run' ).click( function() {
$( 'div' ).filter( ':animated' )
.toggleClass( 'colored' );
});
function animateIt() {
$('#mover').fadeToggle( 'slow', animateIt );
}
animateIt();
~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~
Ссылки