Sliding elements

Trong chương trước, chúng ta đã xem cách mà chúng ta hiển thị một thành phần hay ẩn kiểu fading trong jQuery. Tuy nhiên, thi thoảng một hiệu ứng sliding có thể tốt hơn, và jQuery có một tập các phương thức thực hiện. Hãy xem ví dụ khi chúng ta dùng phương thức slideDown():

<div id="divTestArea1" style="padding: 50px; background-color: #89BC38; text-align: center; display: none;">
        <b>Hello, world!</b>
</div>
<a href="javascript:void(0);" onclick="ShowBox();">Show box</a>
<script type="text/javascript">
function ShowBox()
{
        $("#divTestArea1").slideDown();
}
</script>

Để ẩn box đi thì chúng ta có thể dùng phương thức slideUp(). Chúng đều lấy cùng một tập các tham số tùy chọn. Tham số đầu tiên cho biết khoảng thời gian của hiệu ứng theo mili giây, "fast" hay "slow", có giá trị tương ứng 200 hay 600 mili giây. Hãy xem ví dụ:

<div id="divTestArea21" style="width: 50px; height: 50px; display: none; background-color: #89BC38;"></div>
<div id="divTestArea22" style="width: 50px; height: 50px; display: none; background-color: #C3D1DF;"></div>
<div id="divTestArea23" style="width: 50px; height: 50px; display: none; background-color: #9966FF;"></div>
<a href="javascript:void(0);" onclick="ShowBoxes();">Show boxes</a>
<script type="text/javascript">
function ShowBoxes()
{
	$("#divTestArea21").slideDown("fast");
	$("#divTestArea22").slideDown("slow");
	$("#divTestArea23").slideDown(2000);
}
</script>

Chúng ta xem đoạn HTML để có thể hiểu các khoảng khác biệt mà box được hiển thị. Chú ý box đầu tiên nhanh hiển thị, box thứ hai dài hơn chút và box thứ ba hiển thị chậm nhất vì nó dùng hai giây để hiển thị.

Bây giờ, tham số thứ hai có thể là một hàm (chúng ta không dùng trong bài giảng) hay một hàm callback, được gọi khi hiệu ứng đã xong. Đây là một ví dụ mà chúng ta kết hợp với cả phương thức slideUp():

<div id="divTestArea3" style="width: 50px; height: 50px; display: none; background-color: #89BC38;"></div>
<script type="text/javascript">
$(function()
{
	$("#divTestArea3").slideDown(2000, function()
	{
		$("#divTestArea3").slideUp(3000);
	});
});
</script>

Rất hữu ích khi kết hợp nhiều hiệu ứng, như bạn thấy. Trong ví dụ này, hàm callback mà chúng ta dùng sẽ được gọi ngay khi phương thức slideDown() hoàn thành nên phương thức slideUp() sẽ được gọi.

Trong trường hợp bạn muốn đơn giản hóa hiệu ứng slide lên và xuống dựa vào trạng thái hiện tại thì jQuery cho chúng ta dùng slideToggle() để làm. Kiểm tra ví dụ tiếp theo:

<div id="divTestArea4" style="width: 50px; height: 50px; display: none; background-color: #89BC38;"></div><br />
<a href="javascript:void(0);" onclick="ToggleBox();">Toggle box</a>
<script type="text/javascript">
function ToggleBox()
{
	$("#divTestArea4").slideToggle("slow");	
}
</script>