Web Cơ Bản

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

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

- Phương thức slideDown() dùng để hiện (kèm theo hiệu ứng trượt) một phần tử đang bị ẩn.

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

- Lưu ý: Phương thức slideDown() chỉ có tác dụng với 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 slideDown() trong jQuery

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

$(selector).slideDown(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 slideDown():

Tham số Yêu cầu Mô tả ý nghĩa & cách sử dụng
time Không bắt buộc

- Chỉ định khoảng thời gian mà phần tử bắt đầu được hiện cho đến khi hiện hoàn toàn.

- 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 mà phần tử bắt đầu được hiện cho đến khi hiện hoàn toàn là 400 mili giây.

speed Không bắt buộc

- Chỉ định tốc độ hiện phần tử ở 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 độ hiện phần tử 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 slideDown() đã đượ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ẽ được hiện lên ngay lập tức


<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("div").slideDown();
        });
    });
</script>
Xem ví dụ
Ví dụ 2:

- Khi click vào nút <button> thì phần tử <div> sẽ được hiện lên sau 5 giây


<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("div").slideDown(5000);
        });
    });
</script>
Xem ví dụ
Ví dụ 3:

- Khi click vào nút <button> thì phần tử <div> sẽ được hiện lên sau 5 giây với tốc độ không đổi


<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("div").slideDown(5000,"linear");
        });
    });
</script>
Xem ví dụ
Ví dụ 4:

- Khi click vào nút <button> thì phần tử <div> sẽ được hiện lên sau 5 giây với tốc độ không đổi và sau khi phần tử <div> hiện hoàn toàn thì hiển thị một thông báo "PHẦN TỬ BỊ ẨN ĐÃ ĐƯỢC HIỆN LÊN"


<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("div").slideDown(5000,"linear",function(){
                alert("PHẦN TỬ BỊ ẨN ĐÃ ĐƯỢC HIỆN LÊN");
            });
        });
    });
</script>
Xem ví dụ