обычно принимают продолжительность в первом необязательном аргументе. Если опустить этот аргумент, по умолчанию продолжительность будет составлять 400 миллисекунд. Однако некоторые методы, не получив аргумент с продолжительностью, выполняют операцию немедленно, без анимационного эффекта:
$("#message").fadeIn; // Эффект проявления будет длиться 400 мсек
$("#message").fadeOut("fast"); //
Эффект растворения будет длиться 200 мсек
Эффекты в библиотеке jQuery воспроизводятся асинхронно. Когда производится вызов метода анимационного эффекта, такого как
fadeIn
, он сразу же возвращает управление, а воспроизведение эффекта выполняется «в фоновом режиме». Поскольку методы анимационных эффектов возвращают управление до того, как эффект завершится, многие из них принимают во втором аргументе (также необязательном) функцию, которая будет вызвана по окончании воспроизведения эффекта. Этой функции не передается никаких аргументов, но ссылка
this
в ней будет указывать на элемент документа, к которому применялся эффект. Функция будет вызвана по одному разу для каждого выбранного элемента:
// Быстро проявить элемент, а когда он станет видимым, вывести в нем текст.
$("#message").fadeIn("fast", function { S(this). text(Привет, Мир! "); });
Передача функции обратного вызова методу воспроизведения эффекта позволяет выполнять действия по его окончании. Однако в этом нет необходимости, когда требуется просто последовательно воспроизвести несколько эффектов. По умолчанию библиотека jQuery ставит анимационные эффекты в очередь (в разделе 19.5.2.2 демонстрируется, как изменить это поведение по умолчанию). Если вызвать метод анимационного эффекта относительно элемента, для которого уже воспроизводится анимационный эффект, воспроизведение нового эффекта не начнется немедленно, а будет отложено до окончания воспроизведения текущего эффекта. Например, можно заставить элемент «моргать», пока он не проявится окончательно:
принимают необязательные аргументы, определяющие продолжительность и функцию обратного вызова. Однако этим методам можно также передавать объект, свойства которого определяют параметры эффектов:
// Передать продолжительность и функцию не в отдельных аргументах, а в свойствах объекта
$("#message").fadeIn({ duration: "fast",
complete: function { $(this).text("Привет, Мир!"); }
});
Этот прием с передачей объекта обычно применяется при использовании универсального метода
animate,
но он также может применяться и при работе с методами простых анимационных эффектов. Использование объекта позволяет также определять и другие, расширенные параметры, такие как параметры управления очередью и переходами эффектов. Доступные параметры будут описаны в разделе 19.5.2.2.
Отключение анимационных эффектов
Анимационные эффекты стали нормой на многих веб-сайтах, но они нравятся не всем пользователям: некоторые считают их раздражающими, а кто-то даже может испытывать неприятные ощущения. Пользователи с ограниченными возможностями могут обнаружить, что анимационные эффекты затрудняют использование вспомогательных технологий, таких как программы чтения с экрана, а владельцы устаревших компьютеров будут ощущать нехватку вычислительных мощностей. В качестве жеста уважения к своим пользователям вы должны стараться использовать более простые
анимационные эффекты и в небольшом количестве, а также предоставлять возможность полностью отключать их. Библиотека jQuery дает простую возможность отключить сразу все эффекты: достаточно просто установить свойство
jQuery.fx.off
в значение true. В результате продолжительность всех эффектов будет установлена равной 0 миллисекунд, что заставит их выполняться мгновенно, без анимации.
Чтобы дать пользователям возможность отключать анимационные эффекты, можно включить в сценарий следующий фрагмент:
Затем веб-дизайнер должен включить в страницу элемент с классом «stopmoving», щелчок на котором будет отключать воспроизведение анимационных эффектов.
************************************************
19.5.1. Простые эффекты
Библиотека jQuery реализует девять методов простых анимационных эффектов скрытия и отображения элементов. Их можно разделить на три группы по типам воспроизводимых ими эффектов:
fadeIn, fadeOut, fadeTo
Это самые простые эффекты: методы
fadeIn
и
fadeOut
просто управляют CSS-свойством
opacity
, чтобы скрыть элемент или сделать его видимым. Оба принимают необязательные аргументы, определяющие продолжительность и функцию обратного вызова. Метод
fadeTo
несколько отличается: он принимает аргумент, определяющий конечное значение непрозрачности и плавно изменяет текущее значение непрозрачности элемента до указанного. В первом обязательном аргументе методу
fadeTo
передается продолжительность (или объект с параметрами), а во втором обязательном аргументе - конечное значение непрозрачности. Функция обратного вызова передается в третьем необязательном аргументе.
show, hide, toggle
Метод
fadeOut,
описанный выше, делает элемент невидимым, но сохраняет занимаемую им область в документе. Метод
hide,
напротив, удаляет элемент из потока документа, как если бы его CSS-свойство display было установлено в значение none. При вызове без аргументов методы
hide
и
show
просто немедленно скрывают и отображают выбранные элементы. Однако при вызове с аргументом, определяющим продолжительность (или объект с параметрами), они воспроизводят анимационный эффект скрытия или появления. Meтод
hide
уменьшает ширину и высоту элемента до 0 и одновременно уменьшает до 0 непрозрачность элемента. Метод
show
выполняет обратные действия.
Метод
toggle
изменяет состояние видимости элементов: для скрытых элементов он вызывает метод
show,
а для видимых - метод
hide.
Как и при работе с методами
show
и
hide,
чтобы воспроизвести анимационный эффект, методу
toggle
необходимо передать продолжительность или объект с параметрами. Передача значения true методу
toggle
эквивалентна вызову метода
show
без аргументов, а передача значения false - вызову метода
hide
без аргументов. Обратите также внимание, что если передать методу
toggle
одну или более функций, он зарегистрирует обработчики событий, как описывалось в разделе 19.4.1.