Phương thức fadeToggle() trong jQuery

1) Phương thức fadeToggle() trong jQuery

- Phương thức fadeToggle() dùng để thực hiện luân phiên giữa việc hiện & ẩn một phần tử.

(Lưu ý: Khi phần tử được hiện hay ẩn sẽ có kèm theo hiệu ứng phai màu)

- Ví dụ: Khi bạn bấm vào nút , nếu phần tử bên dưới đang hiện thì nó sẽ bị ẩn đi, còn nếu phần tử bên dưới đang bị ẩn thì nó sẽ được hiện lên.

- Lưu ý:

• Một phần tử bị ẩn bởi phương thức fadeToggle() thì cũng tương tự như việc phần tử đó được thiết lập thuộc tính display với giá trị none trong CSS.
• Phương thức fadeToggle() chỉ có thể hiển thị những phần tử bị ẩn bởi thuộc tính display:none chứ không có tác dụng với phần tử bị ẩn bởi thuộc tính visibility:hidden trong CSS.

2) Cách sử dụng phương thức fadeToggle() trong jQuery

- Để sử dụng phương thức fadeToggle(), ta dùng cú pháp như sau:

$(selector).fadeToggle(time,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 fadeToggle():

3) Một số ví dụ

<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("div").fadeToggle();
        });
    });
</script>

<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("div").fadeToggle(5000);
        });
    });
</script>

<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("div").fadeToggle(5000,"linear");
        });
    });
</script>

<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("div").fadeToggle(5000,"linear",function(){
                alert("Hello jQuery");
            });
        });
    });
</script>