Cách HIỆN/ẨN phần tử với hiệu ứng trượt trong jQuery, cách sử dụng hàm phương thức slideDown(), slideUp(), slideToggle()

Cách HIỆN/ẨN phần tử với hiệu ứng trượt trong jQuery, cách sử dụng hàm phương thức slideDown(), slideUp(), slideToggle()

Cách HIỆN/ẨN phần tử với hiệu ứng trượt trong jQuery

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

Cú pháp

$(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.
Ví dụ 1

HIỆN/ẨN phần tử với hiệu ứng trượt (không sử dụng tham số)


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

HIỆN/ẨN phần tử với hiệu ứng trượt (chỉ sử dụng tham số time)


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

HIỆN/ẨN phần tử với hiệu ứng trượt (chỉ sử dụng tham số callback)


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

HIỆN/ẨN phần tử với hiệu ứng trượt (sử dụng tham số time và callback)


$("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.
Cú pháp

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

Cách sử dụng tham số "time" và "callback" giống như trong phương thức slideDown() và slideUp()

Ví dụ 1

Không sử dụng tham số


$("button").click(function(){
    $("#abc").slideToggle();
})
Ví dụ 2

Chỉ sử dụng tham số time


$("button").click(function(){
    $("#abc").slideToggle(2000);
})
Ví dụ 3

Chỉ sử dụng tham số callback


$("button").click(function(){
    $("#abc").slideToggle(function(){alert("XONG");});
})
Ví dụ 4

Sử dụng tham số time và callback


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

Cách HIỆN/ẨN phần tử với hiệu ứng trượt trong jQuery

Click giùm một cái QUẢNG CÁO để hỗ trợ duy trì website, các bạn ơi