Jquery Slide

28/09/2019

Bài sau » « Bài trước

Jquery Slide là gì ?

Jquery Slide là hiệu ứng làm trượt lên hoặc xuống cho phần tử HTML. Ta có các phương thức như sau:

  • slideDown()
  • slideUp()
  • slideToggle()

Jquery slideDown()

Phương thức slideDown() dùng để làm cho phần tử trượt xuống (show ra).

Cú pháp:

$(selector).slideDown(speed,callback);

Giải thích cú pháp trên:

- Tham số speed: là tốc độ ẩn hay hiển thị với các giá trị là: 'fast', 'slow' hoặc mili giây.

- Tham số callback: là gọi function khác sẽ thực thi sau khi phương thức slideDown() thực thi xong. Phần này sẽ được hướng dẫn cụ thể ở bài học sau.

Ví dụ:

$("button").click(function(){ $("#div").slideDown('slow'); });

Jquery slideUp()

Phương thức slideUp() dùng để làm cho phần tử trượt lên (ẩn đi).

Cú pháp:

$(selector).slideUp(speed,callback);

Giải thích cú pháp trên:

- Tham số speed: là tốc độ ẩn hay hiển thị với các giá trị là: 'fast', 'slow' hoặc mili giây.

- Tham số callback: là gọi function khác sẽ thực thi sau khi phương thức slideUp() thực thi xong. Phần này sẽ được hướng dẫn cụ thể ở bài học sau.

Ví dụ:

$("button").click(function(){ $("#div").slideUp(500); });

Jquery slideToggle()

Phương thức slideToggle() là phương thức tổng hợp từ 2 phương thức slideUp()slideDown().

- Nếu phần tử đã trượt xuống, thì slideToggle() sẽ cho phần tử trượt lên.

- Nếu phần tử đã trượt lên, thì slideToggle() sẽ cho phần tử trượt xuống.

Cú pháp:

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

Giải thích cú pháp trên:

- Tham số speed: là tốc độ ẩn hay hiển thị với các giá trị là: 'fast', 'slow' hoặc mili giây.

- Tham số callback: là gọi function khác sẽ thực thi sau khi phương thức slideToggle() thực thi xong.

Ví dụ:

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

Demo jquery Slide

Bài sau » « Bài trước
Back to top