Jquery Slide
28/09/2019
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() và 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
