Pro jQuery

Pro jQuery

Адам Фриман

Использование эффектов скольжения

В jQuery есть набор эффектов, которые двигают элементы, как слайды, по экрану. Эти методы описаны в таблице 10-4.

Таблица 10-4: Методы для создания эффекта скольжения
Метод Описание
slideDown()
slideDown((time, function)
slideDown(time, easing, function)
Показывает элементы, сдвигая их вниз
slideUp()
slideUp(time, function)
slideUp(time, easing, function)
Прячет элементы, сдвигая их вверх
slideToggle()
slideToggle(time, function)
slideToggle(time, easing, function)
Переключает видимость элементов, сдвигая их вниз и вверх

Эти методы создают анимацию элементов по вертикальной оси. Аргументы этих методов такие же, как и для базовых методов. Можно назначить время действия эффекта, функцию ослабления и функцию обратного вызова. В листинге 10-8 показано использование эффектов скольжения.

Листинг 10-8: Использование эффектов скольжения
<script type="text/javascript">
	$(document).ready(function () {
		$("<button>Toggle</button>").insertAfter("#buttonDiv button")
			.click(function (e) {
				$('h1').slideToggle("fast");
				e.preventDefault();
			});
	});
</script>

В этом скрипте я использую метод slideToggle, чтобы менять видимость элемента h1. Результат можно увидеть на рисунке 10-7.

Рисунок 10-7: Использование эффекта скольжения для показа элемента

На рисунке показано, как элемент h1 становится видимым. Элементы скорее обрезаются, а не масштабируются, потому что jQuery создает эффект, управляя высотой элемента. Вы можете увидеть, что я подразумеваю под этим, на рисунке 10-8.

Рисунок 10-8: jQuery создает эффект, управляя высотой элемента

На этом рисунке крупным планом показано, как элемент h1 становится видимым. Вы видите, что размер текста не меняется, только область его показа. Однако это не подходит для рисунков, потому что браузер их автоматически масштабирует. Если вы внимательно всмотритесь, вы увидите, что рисунок заднего фона всегда показан, но он масштабируется, чтобы соответствовать высоте.

или RSS канал: Что новенького на smarly.net