एनिमेटेड सेलेक्टर

:animated सेलेक्टर उन तत्वों का चयन करता है जो वर्तमान में एनीमेशन में शामिल हैं। यदि आप इफेक्ट्स मॉड्यूल के बिना कस्टम jQuery असेंबली का उपयोग कर रहे हैं, तो :animated का उपयोग करने से एक त्रुटि उत्पन्न होगी। चूंकि :animated CSS विशिष्टता से संबंधित नहीं है, इसलिए आधुनिक ब्राउज़रों में बेहतर प्रदर्शन के लिए शुद्ध CSS-सेलेक्टर का उपयोग करके पहले तत्वों को फ़िल्टर करना बेहतर है, और उसके बाद .filter(':animated') लागू करें।

सिंटैक्स

इस तरह हम एनीमेशन में शामिल तत्वों का चयन करते हैं:

javascript$(':animated');

उदाहरण

आइए एक वर्ग पर animateIt फ़ंक्शन का उपयोग करके एनीमेशन शुरू करें। #change वाले बटन पर प्रत्येक क्लिक के साथ एनिमेटेड वर्ग का रंग हरे से लाल और वापस हरे में बदल जाएगा - colored क्लास को toggleClass विधि द्वारा हटाकर और जोड़कर:

html<button id="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 विधि,
    जो पहले से पाए गए तत्वों के भीतर तत्वों को खोजती है