Bài jQuery 11: Các Animations Stop trong jQuery

0
125

Xin chào các bạn, trong bài học ngày hôm nay mình sẽ giới thiệu đến các bạn các Animations Stop trong jQuery.

Phương thức jQuery Stop()

Phương thức stop() của jQuery được sử dụng để dừng các hành động hoặc hiệu ứng jQuery hiện đang chạy trên các phần tử được chọn trước khi hoàn thành.

Cú pháp cơ bản của phương thức jQuery stop() là:

Các tham số trong cú pháp trên có ý nghĩa như sau:

  • Tham số stopALL nhận vào giá trị kiểu Boolean, chỉ định có loại bỏ các hành động hay không. Giá trị mặc định là false, điều đó có nghĩa là chỉ hành động hiện tại sẽ bị dừng, phần còn lại của hành động trong hàng đợi sẽ chạy sau đó.
  • Tham số goToEnd nhận vào giá trị kiểu Boolean, chỉ định có hoàn thành hoạt động hiện tại ngay lập tức hay không. Giá trị mặc định là false.

Đây là một ví dụ đơn giản thể hiện phương thức jQuery stop() trong hành động thực tế trong đó bạn có thể bắt đầu hoặc dừng hành động khi nhấp vào nút.

Đây là một ví dụ nữa về phương thức này, trong đó, nếu bạn nhấp lại vào nút “Slide Toggle” sau khi bắt đầu hành động nhưng trước khi hoàn thành, hành động sẽ bắt đầu theo hướng ngược lại ngay từ điểm bắt đầu đã lưu.

Tạo hiệu ứng hover mượt mà

Trong khi tạo hiệu ứng hover, một trong những vấn đề phổ biến bạn có thể gặp phải là có nhiều được hiệu ứng trong hàng đợi khi bạn di chuột qua. Bởi vì, trong tình huống này, các sự kiện mouseenter hoặc mouseleave được kích hoạt nhanh chóng trước khi hành động được hoàn tất. Để tránh vấn đề này và tạo hiệu ứng hover đẹp và mượt mà, bạn có thể thêm điểm stop(true, true) vào phương thức chain, như sau:

Kết luận

Như vậy trong bài học ngày hôm nay mình đã giới thiệu đến các bạn Các Animations Stop trong jQuery. Trong bài học tiếp theo chúng ta sẽ cùng nhau tìm hiểu về Chuỗi phương thức trong jQuery.

Chúc các bạn học tập tốt!

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây