Một trong những hiệu ứng cơ bản nhất trong jQuery đó là ẩn/hiện. Bằng cách sử dụng các phương thức
show(), hide() và phương thức tạo ra sự chuyển đổi giữa ẩn và hiện toggle() Let's go, cùng học xem hiệu ứng jQuery tạo ra như thế nào nhé
Các bạn đang xem bài viết thuộc bài học về jQuery Effects - hiệu ứng jQuery
Lời nói đầu
jQuery cung cấp rất nhiều phương thức để tạo ra những hiệu ứng như bài học về hiệu ứng jQuery đã nêu. Ở bài viết này, chúng ta sẽ bắt đầu tìm hiểu rõ hơn về từng hiệu ứng và phương thức trong jQuery để thực hiện hiệu ứng đó.Hãy cùng học jQuery Online tại LaiXe.Xyz thông qua những bài viết và những ví dụ cụ thể nhé
jQuery hide() Method
Click để ẩn nội dung dưới đây
Phương thức
LaiXe.Xyz là website học jQuery cơ bản
hide() tạo ra hiệu ứng ẩn trong jQueryLaiXe.Xyz là website học jQuery cơ bản
hide() trong jQuery tạo ra hiệu ứng ẩn cho phần tử được chọn.Mẹo: Phương thức này giống với thuộc tính của CSS là
display:none
Syntax
Phương thức hide() trong jQuery có cú pháp
$(selector).hide(speed,easing,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 ẩn. (Giá trị mặc định là 400 milliseconds) Giá trị có thể được sử dụng:
|
| easing | Không bắt buộc. Dùng để chỉ định tốc độ của phần tử trong các điểm khác nhau của sự chuyển động.(Giá trị mặc định là "swing") 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 hide() 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 show() và toggle() được đề cập ở dưới |
|
Ví dụ có tham số speed
Tạo hiệu ứng ẩn cho phần tử<p> sử dụng tham số speed là 3 giây
$("p").hide(3000);
Ví dụ có tham số callback
Tạo hiệu ứng ẩn cho phần tử<p> sử dụng tham số callback
$("p").hide(1000, function(){
alert("Phương thức hide() đã hoàn thành!");
});
jQuery show() Method
Click để hiện nội dung dưới đây
show() trong jQuery tạo ra hiệu ứng hiển thị cho phần tử được chọn.Mẹo: Phương thức này sẽ tạo hiệu ứng hiện ra đố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
Syntax
Phương thức show() trong jQuery có cú pháp
$(selector).show(speed,easing,callback)
show() cũng giống như trong phương thức hide() ở trên.
Ví dụ có tham số speed
Tạo hiệu ứng hiển thị cho phần tử<p> sử dụng tham số speed là 3 giây
$("p").show(3000);
Ví dụ có tham số callback
Tạo hiệu ứng hiện cho phần tử<p> sử dụng tham số callback
$("p").show(1000, function(){
alert("Phương thức show() đã hoàn thành!");
});
jQuery toggle() Method
Click để ẩn/hiện nội dung dưới đây
Phương thức
Học jQuery tiếng Việt với những tài liệu và phương pháp học hiệu quả nhất
toggle() tạo ra sự chuyển đổi giữa hide() và show() trong jQueryHọc jQuery tiếng Việt với những tài liệu và phương pháp học hiệu quả nhất
toggle() trong jQuery tạo ra hiệu ứng ẩn hiện 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 show() và hide().Syntax
Phương thức toggle() trong jQuery có cú pháp
$(selector).toggle(speed,easing,callback)
toggle() cũng giống như trong phương thức hide() ở trên.
Ví dụ có tham số speed
Tạo hiệu ứng ẩn/hiện cho phần tử<p> sử dụng tham số speed là 1 giây
$("p").toggle(1000);
Ví dụ có tham số callback
Tạo hiệu ứng ẩn/hiện cho phần tử<p> sử dụng tham số callback
$("p").toggle(1000, function(){
alert("Phương thức toggle() đã hoàn thành!");
});
