Селектори 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();

Ҳамчунин нигаред

  • усули slideToggle,
    ки унсурҳои пинҳоншударо нишон медиҳад ва унсурҳои нишондодашударо пинҳон мекунад
  • усули toggleClass,
    ки синфи CSS-ро илова мекунад ё ҳазф мекунад
  • усули find,
    ки унсурҳоро дар дохили унсурҳои аллакай ёфташуда ҷустуҷӯ мекунад