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ử