ซีเลกเตอร์ animated

ซีเลกเตอร์ :animated เลือกองค์ประกอบที่ กำลังเกี่ยวข้องกับภาพเคลื่อนไหวในขณะนั้น หากคุณใช้ jQuery ที่ปรับแต่งเอง โดยไม่มีโมดูลเอฟเฟกต์ การใช้ :animated จะทำให้เกิดข้อผิดพลาด เนื่องจาก :animated ไม่ได้เป็นส่วนหนึ่งของ ข้อกำหนด CSS ดังนั้นเพื่อปรับปรุงประสิทธิภาพ ในเบราว์เซอร์สมัยใหม่ ควรกรององค์ประกอบ โดยใช้ CSS selector ล้วนๆ ก่อน จากนั้น ค่อยใช้ .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();

ดูเพิ่มเติม