13.4.7. Анимации

Грамотная манипуляция свойствами элементов на странице позволила создателям Javascript-библиотек создавать визуальные эффекты, которые раньше были возможны только при использовании технологии Flash. Это и плавное появление, и скрытие объектов, плавное изменение различных свойств этих объектов (фонового цвета, размеров), реализация всевозможных элементов интерфейса вроде сплиттеров, деревьев, перетягиваемых объектов и сортируемых списков.

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

13.4.7.1. Animate

Ключевой функцией, на которой базируются все остальные, является функция animate:

animate(params, speed, easing, callback);

Здесь:

• params – свойства, которые участвуют в анимации в виде пар {ключ: значение}, например: {height: "show"} или {opacity: 50, width: 100, height: 200};

• speed – скорость в миллисекундах;

• easing – замедление анимации (замедляется ли к концу, "easein", или, наоборот, ускоряется, "easeout");

• callback – функция, которая будет вызвана после завершения анимации.

Пусть, например, есть элемент div с каким-нибудь текстом, и необходимо скрыть этот текст, заменить новым и показать обновленный текст:

$("#mydiv")

.animate({ height: "hide" }, 300)

.text("Новый текст")

.animate({ height: "show" }, 300);

13.4.7.2. Эффекты

Метод animate является основой большинства эффектов jQuery и плагинов. Например, jQuery предлагает следующие методы для показа и скрытия элементов:

• show([speed[, callback]]) – показать элемент;

• hide([speed[, callback]]) – скрыть элемент;

• fadeIn(speed[, callback]) – показать элемент путем изменения его прозрачности;

• fadeOut(speed[, callback]) – скрыть элемент путем изменения его прозрачности;

• slideDown(speed, callback) – показать элемент, спустив его сверху;

• slideUp(speed, callback) – показать элемент, подняв его снизу;

где

• speed – скорость в миллисекундах или одно из "slow" (600 миллисекунд) или "fast" (200 миллисекунд);

• callback – функция, которая будет вызвана после выполнения анимации.

Скрытая мощь функции animate позволяет создавать поистине удивительные эффекты, многие из которых уже реализованы, например, в модуле расширения Interface (http://interface.eyecon.ro/).

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

for (i = 0; i < 10; i++) {

$("#my-div").animate({ height: "show" }, 300);

$("#my-div").animate({ height: "hide" }, 300);

}

В результате будет получено не беспорядочное моргание, пока двадцать эффектов "борются" за право показать/скрыть элемент "my-div", а плавный показ, потом сокрытие, потом снова показ – и так 20 раз. Стоит обратить внимание на то, что очередь эффектов составляется поэлементно. То есть эффекты, примененные к разным элементам одновременно, будут выполняться одновременно.