Fading elements

Để làm hiệu ứng đơn giản rất dễ trong jQuery. Một trong những hiệu ứng là làm xuất hiện dần một thành phần. Đây là một ví dụ đơn giản mà chúng ta làm xuất hiện một box dùng fadeIn():

<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").fadeIn();
}
</script>

You can fade a lot of different elements, like divs, spans or links. The fadeIn() method can take up to three parameters. The first one allows you to specify the duration of the effect in milliseconds, or "fast" or "slow", which is the same as specifying either 200 or 600 milliseconds. Here's an example of it in use:

<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").fadeIn("fast");
	$("#divTestArea22").fadeIn("slow");
	$("#divTestArea23").fadeIn(2000);
}
</script>

Không cần quan tâm đến toàn bộ HTML, nó chỉ là minh họa sự khác biệt giữa khoảng thời gian fading. Bây giờ tham số thứ ahi có thể là một hàm (ta không dùng trong bài giảng) hay là một hàm callback bạn có thể cung cấp, được gọi khi kết thúc hiệu ứng. Đây là một ví dụ, với phương thức fadeOut() thì hiệu ứng ngược fadeIn():

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

Có thể có tình huống bạn muốn một thành phần hiển thị và ẩn đi dựa trên trạng thái hiện tại. Bạn có thể kiểm tra liệu nó có hiển thị hay không và gọi fadeIn() hay fadeOut(), nhưng jQuery hỗ trợ chúng ta một phương thức riêng cho nó gọi là fadeToggle(). Nó lấy tham số giống fadeIn() và fadeOut() nên dễ dùng. Ví dụ:

<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").fadeToggle("slow");	
}
</script>

Và thật dễ dùng hiệu ứng fading trong jQuery.