Разработка на JavaScript. Управление выполнением кода во время работы эффектов Scriptaculous

Владимир | | HTML, JavaScript.

scriptaculous afterFinish
Недавно столкнулся с интересной особенностью работы эффектов в scriptaculous, о которой и хочу рассказать.

Примечание. Для тех, кто не слышал о scriptaculous, поясню. Это очень удобная JavaScript библиотека, которая значительно упрощает работу с элементами web страницы, позволяет создавать различные визуальные эффекты, элементы управления, поддержку drug&drop и т.п. В общем, советую попробовать.

Возвращаюсь к возникшей проблеме.

Нужно было применить эффект подсветки к блоку текста, а затем удалить этот блок.

На первый взгляд, кажется, что задача решается двумя строками кода:

new Effect.Highlight('textBlock', {startcolor:"#FFFFFF", endcolor:"#FF0000", duration:2});
$('textBlock').remove();

В первой строке создается эффект подсветки и применяется к элементу с id= 'textBlock'.
Параметры эффекта:
startcolor – цвет блока в начале эффекта;
endcolor – цвет блока в конце эффекта;
duration – длительнось эффекта в секундах.

Во второй строке функция remove() удаляет блок.

Но, оказалось, что этот код не работает. Т.е. блок удаляется до того как отработает эффект.

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

Решение

Специально для таких ситуаций каждый эффект scriptaculous имеет четыре свойства: beforeStart, beforeUpdate, afterUpdate, afterFinish (думаю, названия говорят сами за себя). Значением этих свойств должно быть имя функции, которую нужно выполнить на соответствующем этапе работы эффекта.

В качестве параметра эта функция принимает объект с информацией об эффекте и блоке, к которому он применяется.

Например, описанная задача решается как:

new Effect.Highlight('textBlock',
	{startcolor:"#FFFFFF",
	endcolor:"#FF0000",
	duration:2,
	afterFinish: function(o) {
		o.element.remove();
	}
});

Как видите, значением параметра afterFinish является анонимная функция, в которой и выполняется удаление текстового блока.

Примечание. Свойство element, параметра функции (o), позволяет работать с блоком страницы, к которому применяется эффект.

Если вы хотите больше узнать о библиотеке scriptaculous, советую почитать:
1) официальный сайт (англ.);
2) раздел JavaScript этого блога;
3) статью «Подсветка элементов web страницы»;
4) книгу «Prototype and Scriptaculous in Action» (англ.).
Кстати, если книга кому-нибудь нужна, пишите в комментариях, могу выслать на eMail или выложить для скачивания.

Удачи!

  • Конечно же эффекты работают параллельно, т.к. здесь применяется либо setTimeout либо setInterval. И это не только в scriptaculous

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

      Отсюда и проблемы. Вроде добавил рабочий эффект, а он «не работает». И начинается отладка…

  • Конечно же эффекты работают параллельно, т.к. здесь применяется либо setTimeout либо setInterval. И это не только в scriptaculous

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

      Отсюда и проблемы. Вроде добавил рабочий эффект, а он «не работает». И начинается отладка…

  • vike

    Да, книжка бы весьма не помешала, на почту, если можно.

  • vike

    Да, книжка бы весьма не помешала, на почту, если можно.

  • Да, с jquery была у меня та же ситуация. Особые проблемы возникают когда эффекты вызываются не в функции, а при событиях, например при mouseover на элементах. Если события рядом — то получался ужас и приходилось вводить переменную, значение которой менять при альтернативе afterFinish. Если она еще не поменята — то второго эффекта не производить.

    • Интересно, если применить эффект подсветки при mouseover на элементах по-идее должен получиться красивый шлейф 🙂 .

      А вообще, мне кажется, что должен быть более красивый способ решения проблемы. Сходу сказать не могу, нужно будет поэкспериментировать.

  • Да, с jquery была у меня та же ситуация. Особые проблемы возникают когда эффекты вызываются не в функции, а при событиях, например при mouseover на элементах. Если события рядом — то получался ужас и приходилось вводить переменную, значение которой менять при альтернативе afterFinish. Если она еще не поменята — то второго эффекта не производить.

    • Интересно, если применить эффект подсветки при mouseover на элементах по-идее должен получиться красивый шлейф 🙂 .

      А вообще, мне кажется, что должен быть более красивый способ решения проблемы. Сходу сказать не могу, нужно будет поэкспериментировать.