18/08/2018, 10:46

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

Ở 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();
})
Xem ví dụ
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);
})
Xem ví dụ
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");});
})
Xem ví dụ
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");});
})
Xem ví dụ

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();
})
Xem ví dụ
Ví dụ 2

Chỉ sử dụng tham số time

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

Chỉ sử dụng tham số callback

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

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

$("button").click(function(){
    $("#abc").slideToggle("slow", function(){alert("XONG");});
})
Xem ví dụ
0