Селектор animated
Селектор :animated ҳозирда анимацияда иштирок этаётган
элементларни танлайди.
Aгар сиз эффектлар модулисиз махсус jQuery тертибни ишлатсангиз,
:animated ни ишлатиш хато келтириши мумкин.
:animated CSS спецификациясига кирмагани сабабли,
замонавий браузерларда самарадорликни яхшилаш учun
аввал элементларни соф css-селектор билан филтрлаш,
сўнгра .filter(':animated') ни кўллаш яхшироқдир.
Синтаксис
Анимацияда иштирок этаётган элементларни шундай танлаймиз:
$(':animated');
Мисол
Квадратларнинг бирида animateIt функцияси ёрдамида
анимация ишга туширилсин. #change тугмаси босилганда
анимацияланган квадратнинг ранги яшилдан қизил рангга ва
оркага ўзгариши учун toggleClass
методи ёрдамида colored синфи ўчирилиб-қўйилади:
<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();
Қараб чикинг
-
метод
slideToggle,
яширилган элементларни кўрсатади ва кўрсатилганларни яширади -
метод
toggleClass,
CSS синфни қўшади ёки ўчиради -
метод
find,
аллакай топилган элементлар ичидан излайди