Phương thức slideUp

Phương thức slideUp ẩn các phần tử một cách mượt mà, cuộn chúng lên trên từ dưới lên. Hiển thị phần tử có thể sử dụng phương thức slideDown.

Cú pháp

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

.slideUp(thời lượng);

Thời gian có thể được chỉ đị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, hiệu ứng chuyển động càng chậm:

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

Nếu không chỉ định tham số - sẽ không có hiệu ứng chuyển động, các phần tử sẽ bị ẩn ngay lập tức:

.slideUp();

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 hiệu ứng chuyển động hoàn thành. Cả hai tham số đều không bắt buộc:

.slideUp(thời lượng, [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 khóa: giá trị:

.slideUp(tùy chọn);

Một đố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ụ, thiết lập thời lượng và hàm làm mượt:

.slideUp( {duration: 800, easing: easeInSine} );

Ví dụ

Hãy sau khi nhấn nút, ẩn mượt mà div cha, chứa ô nhập liệu và nút, bằng phương thức slideUp (div này chúng ta sẽ tìm thấy bằng phương thức parent). Bằng cách truyền từ khóa slow, chúng ta thiết lập tốc độ là 600ms. Trong div với #test chúng ta sẽ xuất dòng chữ 'Text is hidden':

<div>
	<button>ẩn văn bản</button>
	<input type="text" value="aaa">
</div>
<div id="test"></div>

$('button').click(function() {
	$(this).parent().slideUp('slow', function() {
		$('#test').text('Text is hidden');
	});
});

Xem thêm

phương thức slideDown,
hiển thị các phần tử một cách mượt mà
phương thức slideToggle,
luân phiên hiển thị/ẩn các phần tử một cách mượt mà
phương thức fadeOut,
ẩn các phần tử một cách mượt mà, làm chúng trở nên trong suốt
phương thức hide,
ẩn các phần tử một cách mượt mà