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.

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

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

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:

Bài viết này được đăng tại [free tuts .net]

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