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

Отключение анимационных эффектов

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

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

  $(".stopmoving").click(function { jQuery.fx.off = true; });

Затем веб-дизайнер должен включить в страницу элемент с классом «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.

  slideDown, slideUp, slideToggle

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

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

  // Растворить все элементы, затем показать их, затем свернуть и развернуть
  $("img").fadeOut.show(300).slideUp.slideToggle;

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

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

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

// Уменьшить высоту всех изображений до 0

$("img").animate({ height: 0 });

Во втором необязательном аргументе методу animate можно передать объект с параметрами эффекта:

  $( "«sprite"), animate({
   opacity: .25, // Изменить непрозрачность до 0,25
   font-size: 10 // Изменить размер шрифта до 10 пикселов
   }, {
   duration: 500, // Продолжительность 1/2 секунды
   complete: function { // Вызвать эту функцию по окончании
   this.text("До свидания"); // Изменить текст в элементе.
  });

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

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

19.5.2.1. Объект, определяющий изменяемые атрибуты

Первым аргументом метода animate должен быть объект. Имена свойств этого объекта должны совпадать с именами CSS-атрибутов, а значения этих свойств должны определять конечные значения атрибутов, которые должны быть получены к окончанию эффекта. Участвовать в анимационном эффекте могут только атрибуты с числовыми значениями: невозможно реализовать плавное изменение значения цвета, шрифта или свойств-перечислений, таких как display. Если значением свойства является число, подразумевается, что оно измеряется в пикселах. Если значение является строкой, в ней можно указать единицы измерения. Если единицы измерения отсутствуют, опять же предполагается, что значение измеряется в пикселах. Чтобы указать относительные значения, в строковые значения следует добавить префикс: «+=» - для увеличения и «-=» - для уменьшения значения. Например: