Скольжение элементов (sliding)

В предыдущей главе мы рассмотрели как можно изменять видимость объектов с эффектом растворения из jQuery. Однако, иногда лучшим выбором будет эффект скольжения, и для этого в jQuery есть набор соответствующих методов. Давайте начнем с простого примера, в котором используется метод 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>

Чтобы снова скрыть этот блок, мы можем воспользоваться методом slideUp(). Оба этих метода имеют одинаковый набор параметров, все они необязательны. Первый параметр позволяет задать продолжительность эффекта в миллисекундах, либо "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").slideDown("fast");
	$("#divTestArea22").slideDown("slow");
	$("#divTestArea23").slideDown(2000);
}
</script>

В приведенном примере немного больше HTML, чем обычно, но он здесь только для того, чтобы вы могли увидеть разницу в скорости, с которой появляются блоки. Заметьте, что первый блок появляется почти мгновенно, второй вслед за ним, а третий гораздо медленнее, т.к. ему на выскальзывание требуется целых две секунды.

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

Такая возможность может быть полезна для комбинации нескольких эффектов, как вы можете видеть. В данном примере написанная нами callback-функция будет вызвана сразу по завершению работы метода slideDown(), и она, в свою очередь, вызовет метод slideUp().

Если вы хотите, чтобы элемент выехал вверх или вниз в зависимости от его текущего состояния, разработчики jQuery предоставили нам полезный метод slideToggle(). Проверьте следующий пример, в котором используется данный метод:

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