Вход/Регистрация
JavaScript. Подробное руководство, 6-е издание
вернуться

Флэнаган Дэвид

Шрифт:

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

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

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

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

Методы анимационных эффектов объекта

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

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

$("#message").fadeIn({ duration: "fast",

complete: function { $(this).text("Привет, Мир!"); }

});

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

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

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

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

  • Читать дальше
  • 1
  • ...
  • 360
  • 361
  • 362
  • 363
  • 364
  • 365
  • 366
  • 367
  • 368
  • 369
  • 370
  • ...

Ебукер (ebooker) – онлайн-библиотека на русском языке. Книги доступны онлайн, без утомительной регистрации. Огромный выбор и удобный дизайн, позволяющий читать без проблем. Добавляйте сайт в закладки! Все произведения загружаются пользователями: если считаете, что ваши авторские права нарушены – используйте форму обратной связи.

Полезные ссылки

  • Моя полка

Контакты

  • chitat.ebooker@gmail.com

Подпишитесь на рассылку: