Phương thức slideToggle
Phương thức slideToggle hiển thị mượt mà
các phần tử đang ẩn và ẩn các phần tử đang hiển thị.
Cú pháp
Hiển thị/Ẩn trong thời gian xác định,
mặc định là 400ms:
.slideToggle(thời_gian);
Thời gian có thể được chỉ định không chỉ bằng mili giây,
mà còn bằng các từ khóa slow (600ms)
và fast (200ms), giá trị càng lớn,
hoạt ảnh càng chậm:
.slideToggle('slow' hoặc 'fast');
Nếu không chỉ định tham số - sẽ không có hoạt ảnh, các phần tử sẽ hiển thị/ẩn ngay lập tức:
.slideToggle();
Cũng có thể truyền hàm easing (làm mượt) làm tham số thứ hai, và tham số thứ ba là hàm callback - sẽ được thực thi sau khi hoàn thành hoạt ảnh. Cả hai tham số đều không bắt buộc:
.slideToggle(thời_gian, [hàm_easing], [hàm_callback]);
Có thể truyền các tùy chọn khác nhau cho phương thức, dưới dạng một đối tượng JavaScript, chứa các cặp khóa: giá_trị:
.slideToggle(tùy_chọn);
Đối tượng như vậy có thể truyền các
tham số và hàm sau - duration, easing,
queue, specialEasing, step,
progress, complete, start,
done, fail, always. Mô tả
các tham số này bạn có thể xem cho phương thức
animate. Ví dụ,
hãy thiết lập thời lượng và hàm easing:
.slideToggle( {duration: 600, easing: easeInSine} );
Ví dụ
Hãy sau khi nhấn nút, ẩn mượt mà
div cha, là phần tử chứa các đoạn văn,
bằng phương thức slideToggle (div này
chúng ta sẽ tìm bằng phương thức
parent),
sau khi nhấn lại nút, div sẽ
lại được hiển thị mượt mà và cứ thế. Bằng cách truyền từ khóa
slow, chúng ta thiết lập tốc độ là 600ms:
<button>toggle text</button>
<div>
<p id='test'>text text text text text text text</p>
<p>text text text text text text text</p>
<p>text text text text text text text</p>
</div>
$('button').click(function() {
$('#test').parent().slideToggle('slow');
});
