Главная страница   /   10.4. Создание пользовательских эффектов (Pro jQuery

Pro jQuery

Pro jQuery

Адам Фриман

10.4. Создание пользовательских эффектов

jQuery не ограничивает вас использованием базовых эффектов скольжения и изменения прозрачности. Вы можете создавать также свои собственные. В таблице 10-6 показаны методы, которые можно для этого использовать.

Таблица 10-6: Методы для создания пользовательских эффектов
Метод Описание
animate(properties)
animate(properties, time)
animate(properties, time, function)
animate(properties, time, easing, function)
Создает анимацию одного или более CSS свойств, дополнительно можно указать время действия эффекта, функцию ослабления и функцию обратного вызова
animate(properties, options) Создает анимацию одного или более CSS свойств, указывая опции как карту

jQuery может создать анимацию любого свойства, которое принимает простые числовые значения, например, свойство height.

Примечание

Имея возможность создавать анимацию числовых CSS свойств, вы не можете создавать анимацию цветов. Есть несколько способов решения этой задачи. Первым (и на мой взгляд лучшим) решением является использование jQuery UI, о чем я рассказываю в части IV этой книги. Если вы не хотите использовать jQuery UI, вы можете работать с родной браузерной поддержкой CSS анимаций. Их выполнение выстроено довольно хорошо, но эта поддержка неоднородная и ее не существует для старых версий браузеров. Информацию о CSS анимации можно получить из другой моей книги Полное руководство по HTML5, также изданную Apress. И подход, который мне нравится менее всего, – это использование плагина jQuery. Довольно сложно создать правильную анимацию цветов, я до сих пор еще не нашел такой плагин, который бы меня полностью удовлетворил, но из тех, что я знаю, наиболее надежный находится на https://github.com/jquery/jquery-color.

Вы представляете набор свойств, для которых нужно сделать анимацию, в качестве объекта-карты; и, если вы хотите, тоже самое вы можете сделать для опций, которые хотите установить. В листинге 10-12 представлена пользовательская анимация.

Листинг 10-12: Создание пользовательской анимации
<script type="text/javascript">
	$(document).ready(function () {
		$('form').css({ "position": "fixed", "top": "70px", "z-index": "2" });
		$('h1').css({ "position": "fixed", "z-index": "1", "min-width": "0" });
		$("<button>Animate</button>").insertAfter("#buttonDiv button")
			.click(function (e) {
				$('h1').animate({
					height: $('h1').height() + $('form').height() + 10,
					width: ($('form').width())
				});

				e.preventDefault();
			});
	});
</script>

В этом примере я хочу создать анимацию размеров элемента h1 так, чтобы его рисунок заднего фона расширялся за рамки элемента form. Прежде чем я приступлю к этому, мне нужно сделать несколько изменений в CSS для обрабатываемых элементов. Я мог бы сделать это, используя таблицу стилей, о которой я говорил в главе 3, но поскольку эта книга про jQuery, я буду использовать JavaScript. Чтобы анимацией было легче управлять, я расположил оба элемента form и h1, используя режим fixed, и использовал свойство z-index, чтобы убедиться, что элемент h1 будет находиться под элементом form.

Я добавил элемент button, и если на него кликнуть, он вызовет метод animate. Я решил создать анимацию свойств height и width, используя информацию, полученную от других методов jQuery. Результат анимации можно увидеть на рисунке 10-12.

Рисунок 10-12: Выполнение пользовательской анимации

На рисунке я показал только начальные и конечные состояния, но jQuery создает плавный переход, как и для других эффектов, поэтому вы можете управлять переходом, если укажете время действия эффекта и функцию ослабления.

Использование абсолютных конечных значений свойств

Обратите внимание, что для анимации указываются только конечные значения. Отправной точкой для пользовательских анимацией jQuery является текущее значение свойств, для которых создается анимация. Я выбрал значения, которые я получил от других методов jQuery, но есть несколько других путей. Во-первых, конечно же очевидно, что можно использовать абсолютные значения, как показано в листинге 10-13.

Листинг 10-13: Выполнение пользовательской анимации с использованием абсолютных значений
<script type="text/javascript">
	$(document).ready(function () {
		$('form').css({ "position": "fixed", "top": "70px", "z-index": "2" });
		$('h1').css({ "position": "fixed", "z-index": "1", "min-width": "0" });
		$("<button>Animate</button>").insertAfter("#buttonDiv button")
			.click(function (e) {
				$('h1').animate({
					left: 50,
					height: $('h1').height() + $('form').height() + 10,
					width: ($('form').width())
				});
				e.preventDefault();
			});
	});
</script>

В этом примере я добавил в анимацию свойство left, указывая абсолютное значение 50 (что будет считаться как 50 пикселей). Этим я сдвигаю элемент h1 направо. На рисунке 10-13 показан результат анимации.

Рисунок 10-13: Создание пользовательской анимации с фиксированным конечным значением

Использование относительных конечных значений свойств

Можно также указать значения свойств, для которых будет создаваться анимация, используя относительные значения. Увеличение вы указываете, если добавляете значению префикс +=, а для уменьшения используется -=. В листинге 10-14 показано использование относительных значений.

Листинг 10-14: Использование относительных значений при создании пользовательской анимации
<script type="text/javascript">
	$(document).ready(function () {
		$('form').css({ "position": "fixed", "top": "70px", "z-index": "2" });
		$('h1').css({ "position": "fixed", "z-index": "1", "min-width": "0" });
		$("<button>Animate</button>").insertAfter("#buttonDiv button")
			.click(function (e) {
				$('h1').animate({
					height: '+=100',
					width: '-=700'
				});
				e.preventDefault();
			});
	});
</script>