Buzz
Trong bài hướng dẫn jQuery trước đó, Mytour đã hướng dẫn cách ẩn hiện các phần tử HTML bằng jQuery. Bài hướng dẫn tiếp theo sẽ giới thiệu phương thức stop() trong jQuery để dừng các hiệu ứng động.
Dừng Hiệu Ứng Động với stop() trong jQuery
1. Phương thức stop() trong jQuery
Sử dụng stop() trong jQuery để chấm dứt các hiệu ứng jQuery đang diễn ra trên các phần tử đã được chọn trước khi hiệu ứng hoàn tất.
Cấu trúc cơ bản của phương thức stop() trong jQuery như sau:
$(selector).stop(stopAll, goToEnd);
Dưới đây là mô tả về các tham số của phương thức stop() trong jQuery:
- Tham số stopAll (tùy chọn) xác định liệu có loại bỏ tất cả các ảnh động trong hàng đợi hay không. Giá trị mặc định là False, nghĩa là chỉ dừng ảnh động hiện tại và để các ảnh động khác tiếp tục sau đó.
- Tham số goToEnd (tùy chọn) xác định liệu nên dừng ảnh động ngay lập tức hay không. Giá trị mặc định là False.
Ví dụ: Dưới đây là minh họa cho phương thức stop() trong jQuery, bạn có thể nhấp vào nút để bắt đầu và tạm dừng ảnh động:
Dưới đây là kết quả trả về theo định dạng như sau:
Lưu ý: Phương thức stop() ứng dụng cho mọi hiệu ứng jQuery, bao gồm fade, slide, và các hiệu ứng ẩn hiện cũng như các hiệu ứng động tùy chỉnh.
Ví dụ: Dưới đây là một ví dụ khác minh họa về phương thức stop() trong jQuery:
Kết quả trả về có dạng như sau:
2. Tạo hiệu ứng khi di chuột
Hiệu ứng di chuột là một loại hiệu ứng động, nhưng khi di chuột, hiệu ứng sẽ xuất hiện và biến mất nhanh chóng. Điều này xảy ra vì sự kiện mouseenter hoặc mouseleave được kích hoạt ngay trước khi hiệu ứng động hoàn tất.
Để giảm và tránh tình trạng này, chúng ta thêm phương thức stop(true, true) vào chuỗi phương thức để tạo hiệu ứng di chuột mượt mà hơn, như trong ví dụ dưới đây:
Kết quả trả về sẽ có dạng như sau:
Chú ý: Trong jQuery, phương thức stop(true, true) sẽ xoá tất cả các hiệu ứng động trong hàng đợi và chuyển giá trị hiệu ứng động hiện tại sang giá trị cuối cùng.
Vậy là bạn vừa được giới thiệu về phương thức stop() trong jQuery để tạm dừng các hiệu ứng động. Nếu có bất kỳ thắc mắc hoặc câu hỏi nào, đừng ngần ngại để lại ý kiến của bạn trong phần bình luận dưới bài viết.
Trong bài học tiếp theo, Mytour sẽ chia sẻ với bạn về phương thức Getter và Setter trong jQuery.
