Библиотека Scriptaculous содержит массу красивых и полезных эффектов, которые удобно использовать в web приложениях. О некоторых из них я уже писал в предыдущих статьях (например, Подсветка элементов web страницы и Использование Scriptaculous для изменения прозрачности элементов web страницы). Любой из этих эффектов представляет ценность сам по себе, но только использование их комбинаций позволяет раскрыть возможности библиотеки в полной мере.

В этой статье я расскажу, как создавать группы из нескольких эффектов и управлять их выполнением.

Прежде всего, немного теории. Scriptaculous позволяет применить несколько эффектов к одному и тому же блоку web страницы двумя способами:
1) последовательно (эффекты будут применяться по очереди);
2) параллельно (т.е. все выбранные эффекты будут работать одновременно).

Рассмотрим небольшой пример. Допустим, у нас есть web страница с текстовым блоком, к которому мы хотим применить два эффекта:
1) подсветки (Highlight);
2) и перемещения (MoveBy).

Разметка страницы предельно простая:

Как видите, страницы содержит один блок (textBlock) и две кнопки, нажатия на которые вызывают javascript функции runParallel() и runSerial(). Эти функции будут запускать наши эффекты параллельно и последовательно.

Теперь представим, что мы написали такой код:

Как вы думаете, в каком порядке они будут выполнены?
Правильный ответ: “В большинстве случаев параллельно”. Почему в “большинстве случаев”? Потому что, если мы не задали последовательность выполнения явно, то она может зависеть от браузера.

Отсюда простой вывод: “Если используете несколько эффектов, всегда указывайте, в каком порядке их выполнять”.

Параллельное выполнение эффектов
Гарантировать одновременное выполнение эффектов можно с помощью метода Parallel, который создает контейнер для эффектов. В первом параметре этого метода нужно указать все эффекты, которые мы хотим применить, причем в параметры каждого эффекта обязательно добавьте sync: true, а также уберите duration.

Во втором параметре метода передается массив с настройками. Вот здесь и нужно задавать время работы эффектов.

В результате наша функция runParallel() будет выглядеть следующим образом:

Последовательное выполнение эффектов
Тут тоже ничего сложного. Нужно создать очередь (queue) и добавить в нее эффекты.

Создается очередь с помощью параметра queue в настройках эффекта. В качестве значения этому параметру нужно передать массив из двух элементов: position и scope.
1) position – указывает куда будет вставлен данный эффект. Может принимать два значения: end (эффект будет вставлен в конец очереди) и front (в начало).
2) scope – задает название очереди. С его помощью можно создать несколько очередей с эффектами.

Теперь посмотрим наш пример:

Как видите, мы создали очередь под названием myqueue и добавили в ее конец оба наших эффекта.

При добавлении эффекта в конец очереди предыдущие эффекты смещаются вперед. Поэтому в нашем случае сначала блок будет подсвечен, а затем, перемещен.

Если изменить значения параметра position на front, то эффекты будут выполнены в обратном порядке.

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

Если что-то не получилось, скачайте архив с файлами примера.