Phương thức fadeTo

Phương thức fadeTo thay đổi một cách mượt mà độ trong suốt của phần tử đến giá trị được chỉ định, trong phạm vi từ 0 đến 1.

Cú pháp

Thời lượng và độ trong suốt được chỉ định trong bất kỳ biến thể sử dụng nào của phương thức. Thay đổi độ trong suốt trong khoảng thời gian đã định, mặc định là 400ms:

.fadeTo(thời lượng, giá trị độ trong suốt);

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:

.fadeTo('slow' hoặc 'fast', giá trị độ trong suốt);

Cũng có thể truyền một hàm callback (tham số tùy chọn) làm tham số thứ ba - sẽ được thực thi sau khi hoạt ảnh hoàn thành:

.fadeTo(thời lượng, giá trị độ trong suốt, [hàm callback]);

Cũng có thể truyền hàm easing và hàm callback (các tham số tùy chọn) - sẽ được thực thi sau khi hoạt ảnh hoàn thành:

.fadeTo(thời lượng, giá trị độ trong suốt, [hàm easing], [hàm callback]);

Ví dụ

Trong ví dụ tiếp theo, bằng phương pháp fadeTo khi nhấn vào nút #hide phần tử có #test sẽ bị ẩn đi bằng cách giảm độ trong suốt xuống 0.5, còn với #show - sẽ được hiển thị:

<button id="hide">ẩn</button>
<button id="show">hiển thị</button>
<div id="test"></div>

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

$('#show').on('click', function() {
	$('#test').fadeTo(1000, 1);
});

$('#hide').on('click', function() {
	$('#test').fadeTo(1000, 0.5);
});

Xem thêm

phương thức fadeToggle,
thay đổi độ trong suốt của phần tử
phương thức fadeIn,
hiển thị mượt mà các phần tử bị ẩn, làm cho chúng không trong suốt
phương thức animate,
tạo hoạt ảnh cho các thuộc tính của phần tử