Растворение элементов (fading)

С jQuery очень легко делать простые анимации. Один из эффектов, которые он поддерживает "из коробки" - это выцветание (растворение, fading) для появления и исчезновения элемента. Вот простой пример, где мы проявляем изначально скрытый прямоугольник, используя метод 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>

В можете использовать этот эффект для множества разных элементов, таких как div-ы, span-ы и ссылки. Метод fadeIn() может принимать до трех параметров. Первый позволяет вам задать длительность эффекта в миллисекундах, либо "fast" (быстро) или "slow" (медленно), что соответствует 200 и 600 миллисекундах. Вот пример его использования:

<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>

Не обращайте особого внимания на весь HTML, он здесь только для того, чтобы вы могли увидеть разницу в длительности выцветания. Далее, второй параметр может быть как именем easing-функции плавности (что мы не будем использовать в данном пособии) или предоставленную вами callback-функцию, которую нужно вызвать по завершении эффекта. Ниже представлен пример второго варианта, при использовании метода fadeOut(), который, очевидно, является противоположностью метода 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>

Возможны ситуации, когда вы хотите выполнить выцветание элемента в зависимости от его текущего состояния. Можно, конечно, проверить видимый он или нет, и затем вызвать fadeIn() или fadeOut() соответственно, но чудесные разработчики jQuery предоставили нам специальный метод для переключения элемента, который называется fadeToggle(). Он принимает те же параметры, что и fadeIn() и fadeOut(), поэтому его очень легко использовать. Вот небольшой пример:

<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>

Вот насколько легко использовать эффект выцветания в jQuery.