Phương thức fadeIn
Phương thức fadeIn hiển thị các phần tử bị ẩn
một cách mượt mà, làm cho chúng không trong suốt. Có thể ẩn
các phần tử bằng phương thức
fadeOut,
làm cho chúng trong suốt.
Cú pháp
Hiển thị trong thời gian đã định,
mặc định là 400ms:
.fadeIn(thời_gian);
Thời gian không chỉ có thể đặt 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:
.fadeIn('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ị ngay lập tức:
.fadeIn();
Cũng có thể truyền hàm làm mịn làm tham số thứ hai, và tham số thứ ba là hàm callback - sẽ chạy sau khi hoàn thành hoạt ảnh. Cả hai tham số đều không bắt buộc:
.fadeIn(thời_gian, [hàm_làm_mịn], [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 đối tượng JavaScript, chứa các cặp khóa: giá_trị:
.fadeIn(các_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 đặt thời gian và hàm làm mịn:
.fadeIn( {duration: 800, easing: easeInSine} );
Ví dụ
Trong ví dụ tiếp theo, khi nhấp vào nút
#hide phần tử có #test sẽ
bị ẩn bằng phương thức fadeOut,
còn trên nút #show - sẽ được hiển thị, bằng
phương thức fadeIn. Chúng tôi cũng sẽ đặt
tốc độ là 1000ms:
<button id="hide">ẩn</button>
<button id="show">hiện</button>
<div id="test"></div>
#test {
width: 200px;
height: 200px;
background: green;
color: white;
margin-top: 10px;
}
$('#show').on('click', function() {
$('#test').fadeIn(1000);
});
$('#hide').on('click', function() {
$('#test').fadeOut(1000);
});
Ví dụ
Và trong ví dụ tiếp theo, sau khi kết thúc
hoạt ảnh khi hiển thị phần tử #test, chúng tôi
sẽ xuất thông báo
với văn bản '!', còn khi ẩn
thì với văn bản '?':
<button id="hide">ẩn</button>
<button id="show">hiện</button>
<div id="test"></div>
#test {
width: 200px;
height: 200px;
background: green;
color: white;
margin-top: 10px;
}
$('#show').on('click', function() {
$('#test').fadeIn(1000, function() {
alert('!');
});
});
$('#hide').on('click', function() {
$('#test').fadeOut(1000, function() {
alert('?');
});
});
