JavaScript. Подробное руководство, 6-е издание, стр. 312

Этот прием с передачей объекта обычно применяется при использовании универсального метода

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

Анимационные эффекты стали нормой на многих веб-сайтах, но они нравятся не всем пользователям: некоторые считают их раздражающими, а кто-то даже может испытывать неприятные ощущения. Пользователи с ограниченными возможностями могут обнаружить, что анимационные эффекты затрудняют использование вспомогательных технологий, таких как программы чтения с экрана, а владельцы устаревших компьютеров будут ощущать нехватку вычислительных мощностей. В качестве жеста уважения к своим пользователям вы должны стараться использовать более простые анимационные эффекты и в небольшом количестве, а также предоставлять возможность полностью отключать их. Библиотека jQuery дает простую возможность отключить сразу все эффекты: достаточно просто установить свойство

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

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

Затем веб-дизайнер должен включить в страницу элемент с классом «stopmoving», щелчок на котором будет отключать воспроизведение анимационных эффектов.

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

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

Это самые простые эффекты: методы

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

Метод

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

Метод

изменяет состояние видимости элементов: для скрытых элементов он вызывает метод а для видимых - метод Как и при работе с методами и чтобы воспроизвести анимационный эффект, методу необходимо передать продолжительность или объект с параметрами. Передача значения true методу эквивалентна вызову метода без аргументов, а передача значения false - вызову метода без аргументов. Обратите также внимание, что если передать методу одну или более функций, он зарегистрирует обработчики событий, как описывалось в разделе 19.4.1.

Метод

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

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

Различные расширения библиотеки jQuery (раздел 19.9) добавляют в нее дополнительные анимационные эффекты. Наиболее полный набор эффектов включает библиотека jQuery UI (раздел 19.10).

19.5.2. Реализация собственных анимационных эффектов

Метод

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