วิธี stop

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

ไวยากรณ์

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

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

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

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

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

ตัวอย่าง

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

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

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

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

ดูเพิ่มเติม