Phương thức slideToggle() trong jQuery
Để dễ dàng tiếp thu bài hướng dẫn này thì trước tiên bạn cần xem qua:
- Phương thức slideUp() trong jQuery
- Phương thức slideDown() trong jQuery
1) Phương thức slideToggle() trong jQuery
- Phương thức slideToggle() dùng để thực hiện luân phiên giữa việc hiện & ẩn một phần tử.
(Lưu ý: Khi phần tử được hiện hay ẩn sẽ có kèm theo hiệu ứng trượt)
- Ví dụ: Khi bạn bấm vào nút , nếu phần tử bên dưới đang hiện thì nó sẽ bị ẩn đi, còn nếu phần tử bên dưới đang bị ẩn thì nó sẽ được hiện lên.
- Lưu ý:
- Một phần tử bị ẩn bởi phương thức slideToggle() thì cũng tương tự như việc phần tử đó được thiết lập thuộc tính display với giá trị none trong CSS.
- Phương thức slideToggle() chỉ có thể hiển thị những phần tử bị ẩn bởi thuộc tính display:none chứ không có tác dụng với phần tử bị ẩn bởi thuộc tính visibility:hidden trong CSS.
2) Cách sử dụng phương thức slideToggle() trong jQuery
- Để sử dụng phương thức slideToggle(), ta dùng cú pháp như sau:
$(selector).slideToggle(time,speed,callback);
- Dưới đây là bảng mô tả ý nghĩa & cách sử dụng các tham số trong phương thức slideToggle():
Tham số | Yêu cầu | Mô tả ý nghĩa & cách sử dụng |
---|---|---|
time | Không bắt buộc | - Chỉ định khoảng thời gian mà phần tử bắt đầu được hiện (ẩn) cho đến khi hiện (ẩn) hoàn toàn. - Tham số này có thể được xác định bởi một trong ba loại giá trị:
- Lưu ý: Mặc định thì khoảng thời gian mà phần tử bắt đầu được hiện (ẩn) cho đến khi hiện (ẩn) hoàn toàn là 400 mili giây. |
speed | Không bắt buộc | - Chỉ định tốc độ hiện (ẩn) phần tử ở những thời điểm khác nhau. - Tham số này có thể được xác định bởi một trong hai loại giá trị:
- Lưu ý: Mặc định thì tốc độ hiện (ẩn) phần tử là không đổi ("swing") |
callback | Không bắt buộc | - Một hàm callback sẽ được thực thi sau khi phương thức slideToggle() đã được thực thi hoàn tất. |
3) Một số ví dụ
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").slideToggle();
});
});
</script>
Xem ví dụ
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").slideToggle(5000);
});
});
</script>
Xem ví dụ
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").slideToggle(5000,"linear");
});
});
</script>
Xem ví dụ
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").slideToggle(5000,"linear",function(){
alert("Hello jQuery");
});
});
});
</script>
Xem ví dụ