Phương thức fadeTo() trong jQuery
1) Phương thức fadeTo() trong jQuery
- Phương thức fadeTo() dùng để tạo hiệu ứng phai màu cho phần tử.
- Ví dụ: Khi bạn bấm vào nút thì phần tử bên dưới sẽ bị phai màu dần.
- Lưu ý: Phương thức fadeTo() chỉ làm cho phần tử bị phai màu chứ không khiến phần tử bị ẩn đi.
2) Cách sử dụng phương thức fadeTo() trong jQuery
- Để sử dụng phương thức fadeTo(), ta dùng cú pháp như sau:
$(selector).fadeTo(time,opacity,speed,callback);
- Dưới đây là bảng mô tả ý nghĩa & cách sử dụng các tham số trong phương thức fadeTo():
Tham số | Yêu cầu | Mô tả ý nghĩa & cách sử dụng |
---|---|---|
time | Bắt buộc | - Chỉ định khoảng thời gian diễn ra hiệu ứng phai màu. - Tham số này có thể được xác định bởi một trong ba loại giá trị:
- Lưu ý: Mặc định thì khoảng thời gian diễn ra hiệu ứng phai màu là 400 mili giây. |
opacity | Bắt buộc | - Chỉ định mức độ phai màu của phần tử. - Lưu ý: Mức độ phai màu sẽ tăng dần từ 1 ---> 0 |
speed | Không bắt buộc | - Chỉ định tốc độ phai màu ở những thời điểm khác nhau. - Tham số này có thể được xác định bởi một trong hai loại giá trị:
- Lưu ý: Mặc định thì tốc độ phai màu là không đổi ("swing") |
callback | Không bắt buộc | - Một hàm callback sẽ được thực thi sau khi phương thức fadeTo() đã được thực thi hoàn tất. |
3) Một số ví dụ
- Khi click vào nút <button> thì phần tử <div> sẽ xảy ra hiệu ứng phai màu.
(hiệu ứng phai màu sẽ diễn ra trong 2 giây với mức độ phai màu là 0.5)
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").fadeTo(2000,0.5);
});
});
</script>
Xem ví dụ
- Khi click vào nút <button> thì phần tử <div> sẽ xảy ra hiệu ứng phai màu (hiệu ứng phai màu sẽ diễn ra trong 2 giây với mức độ phai màu là 0.2 và tốc độ phai màu ở từng thời điểm không đổi)
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").fadeTo(2000,0.2,"linear");
});
});
</script>
Xem ví dụ
- Khi click vào nút <button> thì phần tử <div> sẽ xảy ra hiệu ứng phai màu (hiệu ứng phai màu sẽ diễn ra trong 2 giây với mức độ phai màu là 0.2, sau khi kết thúc hiệu ứng sẽ hiển thị một thông báo "HOÀN THÀNH HIỆU ỨNG")
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").fadeTo(2000,0.2,function(){
alert("HOÀN THÀNH HIỆU ỨNG");
});
});
});
</script>
Xem ví dụ
<script>
$(document).ready(function(){
$("button[name='button1']").click(function(){
$("div").fadeTo(2000,0.1);
});
$("button[name='button2']").click(function(){
$("div").fadeTo(2000,1);
});
});
</script>
Xem ví dụ