Phương thức slideDown

Phương thức slideDown hiển thị mềm mại các phần tử bị ẩn, bằng cách cuộn chúng từ trên xuống dưới. Có thể ẩn phần tử bằng phương thức slideUp.

Cú pháp

Hiển thị trong khoảng thời gian xác định, mặc định là 400ms:

.slideDown(duration);

Thời gian có thể được xác định không chỉ bằng mili giây, mà còn bằng các từ khóa slow (600ms) và fast (200ms), giá trị càng lớn, hoạt ảnh càng chậm:

.slideDown('slow' hoặc 'fast');

Nếu không chỉ định tham số - sẽ không có hoạt ảnh, các phần tử sẽ hiển thị ngay lập tức:

.slideDown();

Cũng có thể truyền hàm làm mượt làm tham số thứ hai, và tham số thứ ba là hàm callback - sẽ được thực thi sau khi hoàn thành hoạt ảnh. Cả hai tham số đều không bắt buộc:

.slideDown(duration, [hàm làm mượt], [hàm callback]);

Có thể truyền các tùy chọn khác nhau cho phương thức, dưới dạng một đối tượng JavaScript, chứa các cặp key: value:

.slideDown(options);

Đối tượng như vậy có thể truyền các tham số và hàm sau - duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always. Mô tả các tham số này bạn có thể xem cho phương thức animate. Ví dụ, chúng ta hãy thiết lập thời lượng và hàm làm mượt:

.slideDown( {duration: 600, easing: easeInSine} );

Ví dụ

Hãy sau khi nhấn nút, chúng ta sẽ hiển thị mềm mại đoạn văn bị ẩn bằng phương thức slideDown. Bằng cách truyền từ khóa slow, chúng ta thiết lập tốc độ là 600ms. Sau khi hoạt ảnh kết thúc, chúng ta sẽ in ra console 'Animation complete':

<button>hiển thị văn bản</button>
<p style="display: none">văn bản</p>

$('button').click(function() {
	$('p').slideDown('slow', function() {
		console.log('Hoạt ảnh hoàn tất')
	});
});

Xem thêm

phương thức slideUp,
ẩn mềm mại các phần tử
phương thức slideToggle,
luân phiên hiển thị/ẩn mềm mại các phần tử
phương thức fadeIn,
hiển thị mềm mại các phần tử bị ẩn, làm cho chúng không trong suốt
phương thức show,
hiển thị mềm mại các phần tử