Phương thức fadeToggle

Phương thức fadeToggle lần lượt hiển thị hoặc ẩn các phần tử một cách mượt mà, tạo hiệu ứng động cho độ trong suốt của chúng.

Cú pháp

Hiển thị/ẩn trong khoảng thời gian xác định, mặc định là 400ms:

.fadeToggle(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, hiệu ứng động càng chậm:

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

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

.fadeToggle();

Cũng có thể truyền hàm 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 hiệu ứng động hoàn tất. Cả hai tham số đều không bắt buộc:

.fadeToggle(thời gian, [hàm làm mượt], [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ị:

.fadeToggle(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ủa các tham số này bạn có thể xem cho phương thức animate. Ví dụ, chúng ta thiết lập thời lượng và hàm làm mượt:

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

Ví dụ

Trong ví dụ tiếp theo, khi nhấn lần đầu vào nút #toggle phần tử có #test sẽ bị ẩn, và khi nhấn lần nữa - sẽ được hiển thị. Để làm điều này chúng ta sử dụng phương thức fadeToggle. Đồng thời chúng ta thiết lập tốc độ là 1000ms và giá trị của hàm làm mượt là linear:

<button id="toggle">toggle</button>
<div id="test"></div>

#test {
	width: 200px;
	height: 200px;
	background: green;
	color: white;
	margin-top: 10px;
}

$('#toggle').on('click', function() {
	$('#test').fadeToggle(1000, 'linear');
});

Xem thêm

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 fadeTo,
thay đổi độ trong suốt của phần tử
phương thức toggle,
luân phiên hiển thị/ẩn phần tử một cách mượt mà
phương thức animate,
tạo hiệu ứng động cho các thuộc tính của phần tử