Bài viết trước chúng ta đã cùng tìm hiểu hiệu ứng chuyển động bằng phương thức
animate(). Vậy nếu bạn muốn tạm dừng hiệu ứng thì phải làm thế nào? Hãy cùng tham khảo thêm kiến thức về stop() method trong jQuery nhé
Các bạn đang xem bài viết thuộc bài học về jQuery Effects - hiệu ứng jQuery
Ví dụ dừng hiệu ứng animate
Cùng xem ví dụ dưới đây nhé!Khi bạn bấm nút Stop, sẽ dừng hiệu ứng animate đang chạy, nhưng vẫn sẽ tiếp tục các hiệu ứng còn lại.
$(document).ready(function(){
$("#start").click(function(){
$("#animate1").animate({height: 300}, 3000);
$("#animate1").animate({width: 300}, 3000);
$("#animate1").animate({width: 100}, 3000);
$("#animate1").animate({height: 100}, 3000);
});
$("#stop").click(function(){
$("#animate1").stop();
});
});
Vậy có thể dừng tất cả các hiệu ứng hay không? Hoặc dừng và hiển thị kết quả cuối cùng cho các hiệu ứng còn lại hay không ? Hãy cùng đọc tiếp bài viết này nhé!
jQuery stop() Method
Phương thứcstop() dùng để dừng hiệu ứng animate đang chạy cho các phần tử được chọn.
Syntax
Phương thức stop() trong jQuery có cú pháp
$(selector).stop(stopAll,goToEnd)
| Tham số / Parameter | Mô tả |
|---|---|
| stopAll | Không bắt buộc. Giá trị boolean (true or false) chỉ định có hay không việc dừng tất cả các hiệu ứng trong hàng đợi. Tham số này có giá trị mặc định là false |
| goToEnd | Không bắt buộc. Giá trị boolean (true or false) chỉ định có hay không việc hoàn thành tất cả các hiệu ứng trong hàng đợi ngay lập tức. Tham số này có giá trị mặc định là false |
Ví dụ
Dùng phương thứcstop() với tham số stopAll = true để dừng lại tất cả các hiệu ứng animate trong hàng đợi
div.stop(true);
Ví dụ
Dùng phương thứcstop() với tham số để dừng lại và hoàn thành kết quả ngay lập tức của hiệu ứng đang chạy.
div.stop(true, true);
stop() trong chuyên mục các hiệu ứng về jQuery. Hi vọng bài viết sẽ góp chút ít kiến thức để các bạn có thể tự học jQuery Online một cách tốt và hiệu quả nhất