Phương thức fadeOut
Phương thức fadeOut ẩn các phần tử
một cách mượt mà. Hiển thị lại các phần tử có thể bằng phương thức
fadeIn,
làm cho chúng không trong suốt trở lại.
Cú pháp
Hiển thị trong khoảng thời gian xác định,
mặc định là 400ms:
.fadeOut(thời gian);
Thời gian không chỉ có thể được xác định 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:
.fadeOut('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ẽ bị ẩn ngay lập tức:
.fadeOut();
Cũng có thể truyền hàm easing làm tham số thứ hai, và hàm callback thứ ba - sẽ được thực thi sau khi hoàn thành hoạt ảnh. Cả hai tham số đều không bắt buộc:
.fadeOut(thời gian, [hàm easing], [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ị:
.fadeOut(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 lượng và hàm easing:
.fadeOut( {duration: 800, easing: easeInSine} );
Ví dụ
Trong ví dụ sau, khi nhấp vào nút
#hide, phần tử với #test sẽ
bị ẩn đi bằng phương thức fadeOut,
và khi nhấp vào nút #show - sẽ được hiển thị lại, bằng
phương thức fadeIn. Chúng ta 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ụ
Trong ví dụ sau, sau khi kết thúc
hoạt ảnh khi hiển thị phần tử #test, chúng ta
sẽ hiển thị một thông báo
với văn bản '!', và khi ẩn
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('?');
});
});
