ซีเลกเตอร์ animated

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

ไวยากรณ์

นี่คือวิธีเลือกองค์ประกอบที่เกี่ยวข้อง กับภาพเคลื่อนไหว:

$(':animated');

ตัวอย่าง

มาทำให้หนึ่งในสี่เหลี่ยม เริ่มเล่นภาพเคลื่อนไหวด้วยฟังก์ชัน animateIt กัน ทุกครั้งที่คลิกปุ่มที่มี #change สีของสี่เหลี่ยมที่กำลังเคลื่อนไหวจะ เปลี่ยนจากสีเขียวเป็นสีแดงและกลับมา - โดยการ ลบและเพิ่มคลาส colored ด้วยเมธอด toggleClass:

<button id="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,
ซึ่งค้นหาองค์ประกอบภายในองค์ประกอบที่พบแล้ว