Web Cơ Bản

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

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

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

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

- Lưu ý: Một phần tử bị ẩn bởi phương thức slideUp() 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.

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

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

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

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 ẩn cho đến khi ẩ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 ẩn cho đến khi ẩn hoàn toàn là 400 mili giây.

speed Không bắt buộc

- Chỉ định tốc độ ẩ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 độ ẩ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 slideUp() đã đượ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ẽ bị ẩn ngay lập tức


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

- Khi click vào nút <button> thì phần tử <div> sẽ bị ẩn sau 5 giây


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

- Khi click vào nút <button> thì phần tử <div> sẽ bị ẩn sau 5 giây với tốc độ không đổi


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

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


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