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ị: số mili giây cụ thể "slow" "fast" - 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ị: "swing" - chậm ở đoạn đầu & cuối, nhanh ở đoạn giữa. "linear" - tốc độ không đổi. - 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ụ

Ví dụ 1:

- 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ụ

Ví dụ 2:

- 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ụ

Ví dụ 3:

- 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ụ

Ví dụ 4:

<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ụ