Demo : https://www.lenlop123.com/2020/09/142-slideup-slidedown-slidetoggle-hoc.html

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<script src="https://code.jquery.com/jquery-3.6.1.min.js"
  integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>

<div id="div_1" style="background-color: violet;width: 50px;height: 50px;"></div>

<input id="btn_slideUp" type="button" value="slideUp">
<input id="btn_slideDown" type="button" value="slideDown">
<input id="btn_slideToggle" type="button" value="slideToggle">
<br><br>

<input id="btn_slideUp_slow" type="button" value="slideUp slow">
<input id="btn_slideDown_slow" type="button" value="slideDown slow">
<br><br>

<input id="btn_slideUp_callback" type="button" value="slideUp callback">
<input id="btn_slideDown_callback" type="button" value="slideDown callback">
<br><br>


<script>
  // Ẩn tức thì
  $("#btn_slideUp").click(function () {
    $("#div_1").slideUp();
  });


  // Hiện tức thì
  $("#btn_slideDown").click(function () {
    $("#div_1").slideDown();
  });

 
  // slideToggle
  $("#btn_slideToggle").click(function () {
    $("#div_1").slideToggle();
  });

  // Ẩn slow
  $("#btn_slideUp_slow").click(function () {
    $("#div_1").slideUp(1000);
  });


  // Hiện slow
  $("#btn_slideDown_slow").click(function () {
    $("#div_1").slideDown(1000);
  });


  // Ẩn và xử lý
  $("#btn_slideUp_callback").click(function () {
    $("#div_1").slideUp(2000, function () {
      alert("Hàm slideUp đã chạy xong");
    });
  });


  // Hiện và xử lý
  $("#btn_slideDown_callback").click(function () {
    $("#div_1").slideDown(2000, function () {
      alert("Hàm slideDown đã chạy xong");
    });
  });


</script>

1. Cú pháp slideUp và slideDown trong jQuery

Trong jQuery, hai hàm slideUp và slideDown dùng để ẩn và hiện các thẻ HTML với hiệu ứng xổ xuống và kéo lên. Chúng ta hay sử dụng để tạo các menu và accordion.

Cú pháp của nó như sau:

1
2
$(selector).slideUp(speed,easing,callback)
$(selector).slideDown(speed,easing,callback)

Trong đó:

  • selector chính là đối tượng HTML muốn áp dụng.
  • speed chính là tốc độ hiệu ứng xảy ra. Đơn vị được tính là miliseconds. Hoặc bạn có thể truyền vào là fast hoặc slow.
  • easing sẽ có một trong hai giá trị. swing là hiệu ứng xảy ra nhanh ở khúc đầu và cuối, còn linear sẽ có tốc độ giống nhau. Đây là một tùy chọn, nghĩa là bạn có thể truyền vào hoặc không.
  • callback là một hàm, nó sẽ được gọi khi hiệu ứng chạy xong.

Ví dụ: Một vài trường hợp sử dụng của hai hàm này.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// Sử dụng giá trị mặc định
$("selector").slideUp();
$("selector").slideDown();
 
// Sử dụng tham số speed
$("selector").slideUp("fast");
$("selector").slideDown("slow");
 
// Sử dụng hàm callback
$("selector").slideUp("fast", function(){
    alert('Hiệu ứng hoàn thành');
});
$("selector").slideDown("slow", function(){
    alert('Hiệu ứng hoàn thành');
});

2. Vài ví dụ slideUp và slideDown trong jQuery

Bây giờ ta sẽ làm một vài ví dụ đơn giản để giúp các bạn hiểu hơn về hiệu ứng slide này nhé.

Ví dụ 1: Tạo hiệu ứng slideUp và slideDown cho các thẻ p khi click vào các button.

1
2
3
4
5
6
7
8
9
10
11
$(document).ready(function () {
    // Slide up
    $(".up-btn").click(function () {
        $("p").slideUp();
    });
 
    // Slide down
    $(".down-btn").click(function () {
        $("p").slideDown();
    });
});

Ví dụ 2: Kết hợp thêm tham số speed để tạo ra các tốc độ slide khác nhau.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(document).ready(function(){
    // Sliding up
    $(".up-btn").click(function(){
        $("p.normal").slideUp();
        $("p.fast").slideUp("fast");
        $("p.slow").slideUp("slow");
        $("p.very-fast").slideUp(50);
        $("p.very-slow").slideUp(2000);
    });
     
    // Sliding down     $(".down-btn").click(function(){
        $("p.normal").slideDown();
        $("p.fast").slideDown("fast");
        $("p.slow").slideDown("slow");
        $("p.very-fast").slideDown(50);
        $("p.very-slow").slideDown(2000);
    });
});

Ví dụ 3: Sử dụng hàm callback trong hiệu ứng slideUp và slideDown.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(document).ready(function(){
    // Hiển thị thông báo khi hiệu ứng slideUp chạy xong
    $(".up-btn").click(function(){
        $("p").slideUp("slow", function(){
            alert("The slide-up effect is completed.");
        });
    });
     
    // Hiển thị thông báo khi hiệu ứng slide down chạy xong
    $(".down-btn").click(function(){
        $("p").slideDown("slow", function(){
            alert("The slide-down effect is completed.");
        });
    });
});