Hiệu ứng trượt lên, trượt xuống (slide effect) để ẩn hiện phần tử trong jQuery. Bằng cách sử dụng các phương thức
slideUp(), slideDown() và phương thức tạo ra sự chuyển đổi giữa trượt lên xuống slideToggle() Chúng ta cùng học và tìm hiểu từng method này nhé
Các bạn đang xem bài viết thuộc bài học về jQuery Effects - hiệu ứng jQuery
jQuery slideUp() Method
Click để ẩn bằng cách kéo lên nội dung dưới đây
Phương thức
Tự học jQuery tại LaiXe.Xyz
slideUp() tạo ra hiệu ứng trượt lên trong jQueryTự học jQuery tại LaiXe.Xyz
slideUp() trong jQuery tạo ra hiệu ứng ẩn cho phần tử được chọn bằng cách kéo lên, (hoặc trượt lên).hoặc bạn có thể hiểu nôm na là hiệu ứng này làm giảm dần chiều cao của phần tử về 0
Syntax
Phương thức slideUp() trong jQuery có cú pháp
$(selector).slideUp(speed,callback)
| Tham số / Parameter | Mô tả |
|---|---|
| selector | Đây là bộ chọn jQuery để xác định phần tử hoặc những phần tử được chọn |
| speed | Không bắt buộc. Dùng để chỉ định tốc độ của hiệu ứng slide. (Giá trị mặc định là 400 milliseconds) Giá trị có thể được sử dụng:
|
| callback | Không bắt buộc. Dùng để thực thi một hàm sau khi phương thức slideUp() hoàn thành.jQuery Callback sẽ được đề cập rõ hơn trong bài học sau |
Lưu ý: Các tham số trên cũng giống các tham số cho các phương thức slideDown() và slideToggle() được đề cập ở dưới |
|
Ví dụ không có tham số
Tạo hiệu ứng ẩn bằng cách kéo lên cho phần tử<p>
$("p").slideUp();
Ví dụ có tham số speed
Tạo hiệu ứng ẩn bằng cách trượt lên cho phần tử<p> sử dụng tham số speed là 3 giây
$("p").slideUp(3000);
Ví dụ có tham số callback
Tạo hiệu ứng ẩn bằng cách trượt lên cho phần tử<p> sử dụng tham số callback
$("p").slideUp(1000, function(){
alert("Phương thức slideUp() đã hoàn thành!");
});
jQuery slideDown() Method
Click để hiện bằng cách trượt xuống (xổ dọc) nội dung dưới đây
slideDown() trong jQuery tạo ra hiệu ứng hiển thị cho phần tử được chọn bằng cách kéo xuống.Mẹo: Phương thức này sẽ tạo hiệu ứng slideDown đối với những phần tử bị ẩn bằng jQuery và bị ẩn bởi thuộc tính của CSS là
display:none. Còn đối với những phần tử mang thuộc tính CSS (visibility:hidden) sẽ không thực hiện được nhéSyntax
Phương thức slideDown() trong jQuery có cú pháp
$(selector).slideDown(speed,callback)
slideDown() cũng giống như trong phương thức slideUp() ở trên.
Ví dụ không có tham số
Tạo hiệu ứng hiển thị dạng trượt xuống cho phần tử<p>
$("p").slideDown();
Ví dụ có tham số speed
Tạo hiệu ứng hiển thị dạng trượt xuống cho phần tử<p> sử dụng tham số speed là 3 giây
$("p").slideDown(3000);
Ví dụ có tham số callback
Tạo hiệu ứng xổ xuống cho phần tử<p> sử dụng tham số callback
$("p").slideDown(1000, function(){
alert("Phương thức slideDown() đã hoàn thành!");
});
jQuery slideToggle() Method
Click để trượt lên, xuống nội dung dưới đây
Phương thức
Học jQuery hiệu quả nhất bằng tiếng Việt
slideToggle() tạo ra sự chuyển đổi giữa slideUp() và slideDown() trong jQueryHọc jQuery hiệu quả nhất bằng tiếng Việt
slideToggle() trong jQuery tạo ra hiệu ứng trượt lên xuống cho phần tử được chọn, phương thức này là sự chuyển đổi giữa 2 phương thức slideUp() và slideDown().Syntax
Phương thức slideToggle() trong jQuery có cú pháp
$(selector).slideToggle(speed,callback)
slideToggle() cũng giống như trong phương thức slideUp() ở trên.
Ví dụ không có tham số
Tạo hiệu ứng trượt lên/xuống cho phần tử<p>
$("p").slideToggle();
Ví dụ có tham số speed
Tạo hiệu ứng trượt lên/xuống cho phần tử<p> sử dụng tham số speed là 2 giây
$("p").slideToggle(2000);
Ví dụ có tham số callback
Tạo hiệu ứng trượt lên/xuống cho phần tử<p> sử dụng tham số callback
$("p").slideToggle(1000, function(){
alert("Phương thức slideToggle() đã hoàn thành!");
});
