jQuery Effects - Trượt
Phương thức trình chiếu jQuery trượt các phần tử lên và xuống.
Nhấp để trượt xuống / lên bảng điều khiển
Bởi vì thời gian là quý giá, chúng tôi cung cấp việc học nhanh chóng và dễ dàng.
Tại W3Schools, bạn có thể nghiên cứu mọi thứ bạn cần học, ở định dạng dễ tiếp cận và tiện dụng.
Các ví dụ
Thể hiện phương thức jQuery slideDown ().
Thể hiện phương thức jQuery slideUp ().
Thể hiện phương thức jQuery slideToggle ().
Phương thức trượt jQuery
Với jQuery, bạn có thể tạo hiệu ứng trượt trên các phần tử.
jQuery có các phương thức slide sau:
slideDown()slideUp()slideToggle()
Phương thức jQuery slideDown ()
Phương thức jQuery slideDown()được sử dụng để trượt xuống một phần tử.
Cú pháp:
$(selector).slideDown(speed,callback);
Tham số tốc độ tùy chọn chỉ định thời gian của hiệu ứng. Nó có thể nhận các giá trị sau: "chậm", "nhanh" hoặc mili giây.
Tham số gọi lại tùy chọn là một hàm sẽ được thực thi sau khi quá trình trượt hoàn thành.
Ví dụ sau minh họa slideDown()phương pháp:
Thí dụ
$("#flip").click(function(){
$("#panel").slideDown();
});
Phương thức jQuery slideUp ()
Phương thức jQuery slideUp()được sử dụng để trượt lên một phần tử.
Cú pháp:
$(selector).slideUp(speed,callback);
Tham số tốc độ tùy chọn chỉ định thời gian của hiệu ứng. Nó có thể nhận các giá trị sau: "chậm", "nhanh" hoặc mili giây.
Tham số gọi lại tùy chọn là một hàm sẽ được thực thi sau khi quá trình trượt hoàn thành.
Ví dụ sau minh họa slideUp()phương pháp:
Thí dụ
$("#flip").click(function(){
$("#panel").slideUp();
});
Phương thức jQuery slideToggle ()
Phương thức jQuery slideToggle()chuyển đổi giữa các phương thức slideDown()và slideUp()
.
Nếu các phần tử đã được trượt xuống, slideToggle()sẽ trượt chúng lên.
Nếu các phần tử đã được trượt lên, slideToggle()sẽ trượt chúng xuống.
$(selector).slideToggle(speed,callback);
Tham số tốc độ tùy chọn có thể nhận các giá trị sau: "chậm", "nhanh", mili giây.
Tham số gọi lại tùy chọn là một hàm sẽ được thực thi sau khi quá trình trượt hoàn thành.
Ví dụ sau minh họa slideToggle()phương pháp:
Thí dụ
$("#flip").click(function(){
$("#panel").slideToggle();
});
Bài tập jQuery
Tham chiếu hiệu ứng jQuery
Để có cái nhìn tổng quan đầy đủ về tất cả các hiệu ứng jQuery, vui lòng truy cập Tài liệu tham khảo về hiệu ứng jQuery của chúng tôi .