Эффекты в библиотеке jQuery воспроизводятся асинхронно.

Когда производится вызов метода анимационного эффекта, такого как fadeIn(), он сразу же возвращает управление, а воспроизведение эффекта выполняется «в фоновом режиме». Поскольку методы анимационных эффектов возвращают управление до того, как эффект завершится, многие из них принимают во втором аргументе (также необязательном) функцию, которая будет вызвана по окончании воспроизведения эффекта. Этой функции не передается никаких аргументов, но ссылка this в ней будет указывать на элемент документа, к которому применялся эффект. Функция будет вызвана по одному разу для каждого выбранного элемента:

// Бы­ст­ро про­явить эле­мент, а ко­гда он ста­нет ви­ди­мым, вы­вес­ти в нем текст.

 $("#message").fadeIn("fast", function() { $(this).text("При­вет, Мир!"); });

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

Если вызвать метод анимационного эффекта относительно элемента, для которого уже воспроизводится анимационный эффект, воспроизведение нового эффекта не начнется немедленно, а будет отложено до окончания воспроизведения текущего эффекта. Например, можно заставить элемент «моргать», пока он не проявится окончательно:

 $("#blinker").fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn();

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

// Пе­ре­дать про­дол­жи­тель­ность и функ­цию не в от­дель­ных ар­гу­мен­тах, а в свой­ст­вах объ­ек­та

$("#message").fadeIn({ duration: "fast", complete: function() { $(this).text("При­вет, Мир!"); } });

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

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

Простые эффекты

Библиотека jQuery реализует девять методов простых анимационных эффектов скрытия и отображения элементов. Их можно разделить на три группы по типам воспроизводимых ими эффектов:

· fadeIn(), fadeOut(), fadeTo()

Это самые простые эффекты: методы fadeIn() и fadeOut() просто управляют CSS-свойством opacity, чтобы скрыть элемент или сделать его видимым. Оба принимают необязательные аргументы, определяющие продолжительность и функцию обратного вызова.

Метод fadeTo() несколько отличается: он принимает аргумент, определяющий конечное значение непрозрачности и плавно изменяет текущее значение непрозрачности элемента до указанного. В первом обязательном аргументе методу fadeTo() передается продолжительность (или объект с параметрами), а во втором обязательном аргументе – конечное значение непрозрачности. Функция обратного вызова передается в третьем необязательном аргументе.

· show(), hide(), toggle()

Метод fadeOut(), описанный выше, делает элемент невидимым, но сохраняет занимаемую им область в документе. Метод hide(), напротив, удаляет элемент из потока документа, как если бы его CSS-свойство display было установлено в значение none. При вызове без аргументов методы hide() и show() просто немедленно скрывают и отображают выбранные элементы. Однако при вызове с аргументом, определяющим продолжительность (или объект с параметрами), они воспроизводят анимационный эффект скрытия или появления.

Метод hide() уменьшает ширину и высоту элемента до 0 и одновременно уменьшает до 0 непрозрачность элемента.

Метод show() выполняет обратные действия.

Метод toggle() изменяет состояние видимости элементов: для скрытых элементов он вызывает метод show(), а для видимых – метод hide(). Как и при работе с методами show() и hide(), чтобы воспроизвести анимационный эффект, методу toggle() необходимо передать продолжительность или объект с параметрами. Передача значения true методу toggle() эквивалентна вызову метода show() без аргументов, а передача значения false – вызову метода hide() без аргументов.

· slideDown(), slideUp(), slideToggle()

Метод slideUp() скрывает выбранные элементы в объекте jQuery, постепенно уменьшая их высоту до 0, и устанавливает CSS-свойство display в значение «none».

Метод slideDown() выполняет противоположные действия, чтобы сделать скрытый элемент видимым.

Метод slideToggle() переключает состояние видимости элементов, используя методы slideUp() и slideDown().

Каждый из этих трех методов принимает необязательные аргументы, определяющие продолжительность и функцию обратного вызова (или объект с параметрами).