Các hàm xử lý chuỗi trong Javascript (cắt / tách / nối chuỗi ..) 
Chia lấy phần dư / chia lấy phần nguyên trong javascript 
Các sự kiện (Event) trong Javascript 
Các cách khai báo biến trong Javascript 
Hướng tạo thanh search bar bằng CSS 
Bắt sự kiện click trong Javascript 
Cách khai báo biến trong PHP, các loại biến thường gặp 
Download và cài đặt Vertrigo Server 
Thẻ li trong HTML 
Thẻ article trong HTML5 
Cấu trúc HTML5: Cách tạo template HTML5 đầu tiên 
Cách dùng thẻ img trong HTML và các thuộc tính của img 
Thẻ a trong HTML và các thuộc tính của thẻ a thường dùng 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é.
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 đó:
selectorchính là đối tượng HTML muốn áp dụng.speedchí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.easingsẽ 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.callbacklà 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.
$(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.
$(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.
$(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.
