jQuery: Dừng hiệu ứng - stop()
Trong quá trình hiệu ứng đang thực thi, nếu bạn muốn dừng lại bạn chỉ cần sử dụng phương thức stop(). stop() sẽ dừng việc thực thi hiệu ứng trước khi nó kết thúc.
Phương thức stop() áp dụng cho các loại hiệu ứng như hiệu ứng trượt, fading và hoạt ảnh.
Cú pháp:
$(Bộ_chọn).stop(stopAll, goToEnd);
, trong đó đối số stopAll dùng để dừng (hủy) tất cả các hiệu ứng được thiết lập cho phần tử, giá trị mặc định của đối số này là false, đối số goToEnd dùng để hoàn tất ngay lập tức hiệu ứng hiện tại, giá trị mặc định của đối số này là false.
Như vậy, nếu như bạn không dùng đến hai đối số stopAll và goToEnd thì phương thức stop() sẽ dừng (hủy) hiệu ứng hiện thời trên phần tử.
Ví dụ:
<!DOCTYPE html> <html> <head> <title>Dừng hiệu ứng - stop()</title> <meta charset="utf-8"> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <button id="b1">Click => Slide (Up, Down, Toggle)</button> <button id="b2">Click => stop(false,false)</button> <button id="b3">Click => stop(false,true)</button> <button id="b4">Click => stop(true,false)</button> <button id="b5">Click => stop(true,true)</button> <hr> <section style="height: 480px;background: red;border: green thin solid"></section> <script> $(function(){ $("#b1").click(function(){ $("section").slideUp(3000).slideDown(3000).slideToggle(3000); }); $("#b2").click(function(){ $("section").stop(false,false); }); $("#b3").click(function(){ $("section").stop(false,true); }); $("#b4").click(function(){ $("section").stop(true,false); }); $("#b5").click(function(){ $("section").stop(true,true); }); }); </script> </body> </html>
Demo: