วิธี stop

วิธี stop ช่วยให้เราสามารถหยุดแอนิเมชันที่กำลังทำงานอยู่ได้ทันที แอนิเมชันจะดำเนินต่อจากฟังก์ชันถัดไปโดยไม่ต้องรอให้อันก่อนหน้าสิ้นสุด

ไวยากรณ์

นี่คือวิธีการหยุดแอนิเมชันที่กำลังทำงานอยู่ สามารถส่งพารามิเตอร์เสริมได้สองตัวซึ่งรับค่าบูลีน ถ้าตั้งพารามิเตอร์แรกเป็น true ฟังก์ชันที่เหลือในคิวแอนิเมชันจะถูกลบออกและจะไม่ถูกเรียกใช้งานอีก ถ้าตั้งพารามิเตอร์ที่สองเป็น true เมื่อหยุดแอนิเมชัน ค่าคุณสมบัติ CSS ขององค์ประกอบจะเปลี่ยนไปเป็นค่าสุดท้ายทันที (เช่น ถ้าจุดประสงค์คือการซ่อนองค์ประกอบอย่างนุ่มนวล องค์ประกอบจะถูกซ่อนทันที):

.stop([clearQueue], [jumpToEnd]);

ยังสามารถส่งพารามิเตอร์เสริมได้ ซึ่งระบุชื่อของคิว:

.stop([ชื่อคิว], [clearQueue],[jumpToEnd]);

สามารถปิดใช้งานแอนิเมชันทั้งระบบได้ โดยใช้การตั้งค่า jQuery.fx.off = true ซึ่งจะกำหนดค่าความยาวเวลาการดำเนินการเป็น 0

ตัวอย่าง

มาทำให้ทุกครั้งที่คลิกที่ปุ่ม #toggle สี่เหลี่ยมของเราจะคลี่ออกและหดกลับโดยใช้วิธี slideToggle กดปุ่มโดยไม่ต้องรอให้แอนิเมชันสิ้นสุด - ขั้นตอนถัดไปจะเริ่มทำงานโดยไม่ต้องรอให้ขั้นก่อนหน้าสิ้นสุด ต้องขอบคุณวิธี stop:

<button id="toggle">toggle</button>
<div id="test"></div>

#test {
	background-color: green;
	border: 1px solid black;
	width: 200px;
	height: 100px;
	margin: 10px;
}

$('#toggle').on('click', function() {
	$('#test').stop().slideToggle(1500);
});

ดูเพิ่มเติม

วิธี clearQueue,
ซึ่งช่วยลบรายการที่ยังไม่ได้ดำเนินการทั้งหมดออกจากคิวของฟังก์ชัน
คุณสมบัติ jQuery.fx.off,
ซึ่งช่วยปิดใช้งานแอนิเมชันทั้งระบบ