# slideUp() và slideDown() trong jQuery

Trong bài này chúng ta sẽ tìm hiểu hai hàm dùng để tạo hiệu ứng slide trong jQuery, đó là **slideUp và slideDown**. Qua đó sẽ giúp bạn hiểu được khi nào thì nên dùng.

Nếu nói đến hiệu ứng slide thì ta phải tìm đến những plugin chuyên nghiệp. Nhưng nếu bạn chỉ cần hiệu ứng đơn giản là xổ lên và xổ xuống thì hãy sử dụng hai hàm này nhé. Nó không giống như fadeOut hay fadeIn, cũng không giống hide và show đâu nhé.

### Cú pháp slideUp và slideDown trong jQuery <a href="#goto-h2-0" id="goto-h2-0"></a>

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:

```javascript
$(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.

```javascript
// 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');
});
```

### Vài ví dụ slideUp và slideDown trong jQuery <a href="#goto-h2-1" id="goto-h2-1"></a>

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.

```javascript
$(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.

```javascript
$(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);
    });
});
```
