Phương thức toggle

Phương thức toggle luân phiên hiển thị/ẩn phần tử một cách mượt mà. Nếu phần tử đang hiển thị, nó sẽ bị ẩn đi và ngược lại.

Cú pháp

Hiển thị trong khoảng thời gian xác định tính bằng mili giây, mặc định là 400ms:

.toggle(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:

.toggle('slow' hoặc 'fast');

Có thể truyền giá trị true hoặc false với tham số display. Nếu là true, phần tử sẽ chỉ được hiển thị, false - chỉ được ẩn đi:

.toggle(display);

Nếu không chỉ định tham số - sẽ không có hoạt ảnh, phần tử sẽ hiển thị/ẩn đi ngay lập tức:

.toggle();

Cũng có thể truyền hàm làm mượt làm tham số thứ hai, và hàm callback làm tham số thứ ba - sẽ được kích hoạt sau khi hoạt ảnh thực hiện xong. Cả hai tham số đều không bắt buộc:

.toggle(thời_gian, [hàm_làm_mượt], [hàm_callback]);

Có thể chỉ cần truyền hàm callback làm tham số thứ hai không bắt buộc - sẽ được kích hoạt sau khi hoạt ảnh thực hiện xong:

.toggle(thời_gian, [hàm_callback]);

Có thể truyền cho phương thức các tùy chọn khác nhau, dưới dạng đối tượng JavaScript, chứa các cặp khóa: giá_trị:

.toggle(options);

Một đố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 đặt thời gian và hàm làm mượt:

.toggle( {duration: 800, easing: easeInSine} );

Ví dụ

Hãy sau khi nhấn nút, hiển thị mượt mà đoạn văn bị ẩn bằng phương thức toggle. Bằng cách truyền từ khóa slow, chúng ta sẽ đặt tốc độ là 600ms. Khi nhấn lại lần nữa - sẽ ẩn đi:

<button>hiển thị văn bản</button>
<p style="display: none">văn bản</p>

$('button').click(function() {
	$('p').toggle('slow');
});

Xem thêm

phương thức fadeToggle,
thay đổi độ trong suốt của phần tử
phương thức slideToggle,
luân phiên hiển thị/ẩn phần tử một cách mượt mà
phương thức show,
hiển thị phần tử một cách mượt mà
phương thức hide,
ẩn phần tử một cách mượt mà