BASIC
EFFECTS
DOM
ADVANCED
JQUERY CĂN BẢN
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
MỚI CẬP NHẬT

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é.

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

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 accordion.

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

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

// 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.

Demo RUN
$(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.

Demo RUN
$(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.

Demo RUN
$(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.");
        });
    });
});

Như vậy là mình đã giới thiệu xong hai hàm slideUp và slideDown trong jQuery, qua đó bạn có thể áp dụng vào việc tạo menu hoặc hiệu ứng category accordion rồi đấy.

Cùng chuyên mục:

fadeIn() và fadeOut() trong jQuery

fadeIn() và fadeOut() trong jQuery

Không giống như show và hide, fadeIn và fadeOut sẽ hiển thị hoặc mờ ...

Show() và Hide() trong jQuery

Show() và Hide() trong jQuery

Hàm hide chỉ đơn giản là thiết lập thuộc tính ...

jQuery selector là gì? Trọn bộ selector trong jQuery đầy đủ nhất

jQuery selector là gì? Trọn bộ selector trong jQuery đầy đủ nhất

Trong bài này chúng ta sẽ tìm hiểu về Selector trong jQuery, đây là bài…

jQuery là gì? Cách viết jQuery cho người mới bắt đầu

jQuery là gì? Cách viết jQuery cho người mới bắt đầu

Trong công nghệ web 2.0 thì Javascript là một

Cách ẩn hiện nội dung khi click vào button trong jQuery

Cách ẩn hiện nội dung khi click vào button trong jQuery

Cách dùng All Selector (“*”) trong jQuery

Cách dùng All Selector (“*”) trong jQuery

Cách dùng All Selector (“*”) trong jQuery

Cách dùng :animated Selector trong jQuery

Cách dùng :animated Selector trong jQuery

Cách dùng :animated Selector trong jQuery

Cách dùng Attribute Contains Prefix Selector [name|=”value”] trong jQuery

Cách dùng Attribute Contains Prefix Selector [name|=”value”] trong jQuery

Cách dùng Attribute Contains Prefix Selector [name|=”value”] trong jQuery

Cách dùng Attribute Contains Selector [name*=”value”] trong jQuery

Cách dùng Attribute Contains Selector [name*=”value”] trong jQuery

Cách dùng Attribute Contains Selector [name*=”value”] trong jQuery

Cách dùng Attribute Contains Word Selector [name~=”value”] trong jQuery

Cách dùng Attribute Contains Word Selector [name~=”value”] trong jQuery

Cách dùng Attribute Contains Word Selector [name~=”value”] trong jQuery

Cách dùng Attribute Ends With Selector [name$=”value”] trong jQuery

Cách dùng Attribute Ends With Selector [name$=”value”] trong jQuery

Cách dùng Attribute Ends With Selector [name$=”value”] trong jQuery

Cách dùng Attribute Equals Selector [name=”value”] trong jQuery

Cách dùng Attribute Equals Selector [name=”value”] trong jQuery

Cách dùng Attribute Equals Selector [name=”value”] trong jQuery

Cách dùng Attribute Not Equal Selector [name!=”value”] trong jQuery

Cách dùng Attribute Not Equal Selector [name!=”value”] trong jQuery

Cách dùng Attribute Not Equal Selector [name!=”value”] trong jQuery

Cách dùng Attribute Starts With Selector [name^=”value”] trong jQuery

Cách dùng Attribute Starts With Selector [name^=”value”] trong jQuery

Cách dùng Attribute Starts With Selector [name^=”value”] trong jQuery

Cách dùng :button Selector trong jQuery

Cách dùng :button Selector trong jQuery

Cách dùng :button Selector trong jQuery

Cách dùng :checkbox Selector trong jQuery

Cách dùng :checkbox Selector trong jQuery

Cách dùng :checkbox Selector trong jQuery

Cách dùng :checked Selector trong jQuery

Cách dùng :checked Selector trong jQuery

Cách dùng :checked Selector trong jQuery

Cách dùng Child Selector (“parent > child”) trong jQuery

Cách dùng Child Selector (“parent > child”) trong jQuery

Cách dùng Child Selector (“parent > child”) trong jQuery

Cách dùng Class Selector (“.class”) trong jQuery

Cách dùng Class Selector (“.class”) trong jQuery

Cách dùng Class Selector (“.class”) trong jQuery

Cách dùng :contains() Selector trong jQuery

Cách dùng :contains() Selector trong jQuery

Cách dùng :contains() Selector trong jQuery

Top