jQuery Bài 07: Cách hiện và ẩn một phần tử (với hiệu ứng trượt)

Ở bài hướng dẫn này, bạn sẽ được tìm hiểu cách hiện và ẩn một phần tử HTML với hiệu ứng trượt

Bấm vào đây để HIỆN phần tử bên dưới

Bấm vào đây để ẨN phần tử bên dưới

Với hiệu ứng trượt, chúng ta có ba phương thức:

• slideDown() – hiện phần tử với hiệu ứng trượt xuống.
• slideUp() – ẩn phần tử với hiệu ứng trượt lên.
• slideToggle() – thực hiện luân phiên giữa việc hiện và ẩn phần tử với hiệu ứng trượt.

Phương thức slideDown() và phương thức slideUp()

Phương thức slideDown() dùng để hiện một phần tử HTML với hiệu ứng trượt xuống.

Phương thức slideUp() dùng để ẩn một phần tử HTML với hiệu ứng trượt lên.

$(selector).slideDown(time, callback);
$(selector).slideUp(time, callback);

Trong đó:

• Tham số time là khoảng thời gian của việc thực thi hiện/ẩn phần tử. Giá trị của tham số time có thể là:
• “slow” khoảng thời gian tương đối dài.
• “fast” khoảng thời gian tương đối ngắn.
• milliseconds (Ví dụ: 3000, 9000). Lưu ý: 1000 milliseconds = 1 giây
• Tham số callback là một hàm sẽ được thực thi sau khi việc hiện/ẩn phần tử đã được hoàn thành.

$("input[value='hien']").click(function(){
    $("#abc").slideDown();
})
$("input[value='an']").click(function(){
    $("#abc").slideUp();
})

$("input[value='hien']").click(function(){
    $("#abc").slideDown(2000);
})
$("input[value='an']").click(function(){
    $("#abc").slideUp(2000);
})

$("input[value='hien']").click(function(){
    $("#abc").slideDown(function(){alert("HIỆN");});
})
$("input[value='an']").click(function(){
    $("#abc").slideUp(function(){alert("ẨN");});
})

$("input[value='hien']").click(function(){
    $("#abc").slideDown("slow", function(){alert("HIỆN");});
})
$("input[value='an']").click(function(){
    $("#abc").slideUp("slow", function(){alert("ẨN");});
})

Phương thức slideToggle()

Phương thức slideToggle() dùng để thực hiện luân phiên giữa việc hiện và ẩn phần tử HTML với hiệu ứng trượt.

Ví dụ:

• Khi phần tử đang bị ẩn, phương thức slideToggle() sẽ hiện phần tử lên.
• Khi phần tử đang hiện, phương thức slideToggle() sẽ ẩn phần tử đi.

$(selector).slideToggle(time, callback);

$("button").click(function(){
    $("#abc").slideToggle();
})

$("button").click(function(){
    $("#abc").slideToggle(2000);
})

$("button").click(function(){
    $("#abc").slideToggle(function(){alert("XONG");});
})

$("button").click(function(){
    $("#abc").slideToggle("slow", function(){alert("XONG");});
})