JQuery animate() метод позволяет создавать пользовательские анимации.
Запуск анимации
Jquery анимация - animate() МетодJquery animate() метод используется для создания пользовательской анимации.
Синтаксис:
$(selector ).animate({params },speed,callback );
Обязательный параметр PARAMS определяет свойства CSS, чтобы быть анимированными.
Необязательный параметр скорости определяет длительность эффекта. Он может принимать следующие значения: "slow", "fast" или миллисекунды.
Необязательный параметр обратного вызова является функцией, которая будет выполнена после того, как анимация завершается.
Следующий пример демонстрирует простое использование animate() метода; он перемещает элемент вправо, пока он не достигнет левого свойство 250px:
По умолчанию все элементы HTML имеют статическое положение, и не могут быть перемещены.
Для того, чтобы манипулировать позицию, не забудьте сначала установить позицию CSS свойство элемента по relative, fixed
или absolute
!
Обратите внимание на то, что многочисленные свойства могут быть оживлены одновременно:
Можно ли манипулировать всеми свойствами CSS с animate() метод?
Да, почти! Тем не менее, есть одна важная вещь, чтобы помнить: все имена свойств должны быть верблюжьей обсаженной при совместном использовании с animate() метод: Вам нужно будет написать paddingLeft вместо padding-left, marginRight вместо margin-right , и так далее.
Кроме того, цвет анимации не входит в основной Jquery библиотеке.
Если вы хотите, чтобы оживить цвет, вам необходимо скачать плагин Color Animations из jQuery.com.
Кроме того, можно определить относительные значения (значение, то по отношению к текущему значению элемента). Это делается путем ввода += или -= перед значением:
JQuery animate() - с использованием предварительно определенных значенийВы даже можете указать значение анимационной свойства, как "show", "hide" , или "toggle" :
JQuery animate() - Использует очереди ФункциональностьПо умолчанию Jquery поставляется с функциональностью очереди для анимации.
Это означает, что если вы пишете несколько animate() вызывает после того, как друг с другом, JQuery создает "внутренний" очередь с этими вызовами методов. Затем он запускает одушевленного называет один за другим.
Итак, если вы хотите выполнять различные анимации после того, как друг с другом, мы воспользоваться функциональностью очереди:
Пример 1$("button").click(function(){
var div = $("div");
div.animate({height: "300px", opacity: "0.4"}, "slow");
div.animate({width: "300px", opacity: "0.8"}, "slow");
div.animate({height: "100px", opacity: "0.4"}, "slow");
div.animate({width: "100px", opacity: "0.8"}, "slow");
Небольшой штрих анимации может украсить любой, скучный интерфейс. В сегодняшней статье, вы узнаете, как правильно ее использовать с помощью jQuery.
ВступлениеАнимация – понятие, которое обычно вызывает неоднозначную реакцию у людей. Одни считают ее полезной, другие осуждают ее чрезмерное использование. Несмотря на это, правильно используемая анимация, зачастую украшает пользовательский интерфейс, и делает его более опрятным и живым. В сегодняшней статье, мы коротко рассмотрим основы jQuery, затем научимся создавать нашу первую анимацию, научимся строить различные эффекты, а затем создадим анимацию, которую вполне можно будет использовать в реальных проектах.
Шаг 1. Основы jQueryjQuery – это JavaScript библиотека, которая призвана помочь разработчику создавать многофункциональные, интерактивные веб-сайты и пользовательские интерфейсы, с использованием минимально возможного количества кода.
Обычная строка кода, выглядит следующим образом:
$(DOM Element).something();
Давайте разберем каждую часть:
- $ — Сокращение для объекта jQuery. Если вы одновременно используете несколько фреймворков на одной странице, вместо знака $, воспользуетесь сокращением jQuery: jQuery(DOM Element).something();
- (DOM Element) – Элемент, с которым вы собираетесь что-то сделать. Это одна из ключевых особенностей jQuery. Вы можете использовать CSS-селекторы для получения нужного элемента. Любые селекторы, работающие в CSS-файле, могут быть использованы здесь. ID, классы, псевдо-классы, все что угодно.
- .something() – То, что вы хотите сделать с полученным элементом. Это может быть все что угодно от простого скрытия элемента до создания AJAX-запроса к обработчику события.
Сегодня мы рассмотрим только анимацию, и эффекты, связанные с ее функциональностью.
Шаг 2. Использование встроенных эффектовjQuery предоставляет большое количество встроенных методов, которые вы можете использовать прямо из коробки. Это методы для отображения/скрытия элементов, с различными вариациями, включающими скольжение элемента и изменение его прозрачности. Вы также можете использовать ряд методов toggle , которые переключают видимость элемента.
Прежде чем мы рассмотрим каждый из этих методов, посмотрите на основной формат вызова каждого метода:
$("#element").effect();
Выше представлена основная парадигма jQuery, сначала мы получаем необходимый элемент, используя CSS-селекторы. Далее, мы просто вызываем любой из встроенных методов.
Несмотря на то, что большинство методов можно вызвать без параметров, часто возникает необходимость настроить их функциональность. Каждый из методов принимает как минимум два параметра: speed и callback .
speed – определяет продолжительность анимации в секундах. Вы можете передать в качестве значения одно из ключевых слов: slow, normal или fast; или задать время в миллисекундах.
callback — это функция, которая выполняется после того как анимация завершена. Вы можете использовать ее для чего угодно, например, сделать AJAX-вызов в фоне, обновить часть пользовательского интерфейса и многое другое. Вы ограничены только своим воображением.
- show /hide – Методы для отображения и скрытия элемента. Принимают в качестве параметров speed и callback.
- toggle – Метод, манипулирующий с отображением элемента, в зависимости от текущего состояния элемента. То есть если он скрыт, то отображает его и наоборот. Использует методы show и hide.
- slideDown /slideUp – Вполне очевидные методы. Изменяя высоту элемента, создается скользящая анимация, отображающая или наоборот скрывающая элемент.
- slideToggle – Практически то же самое что и метод toggle, за исключением того, что здесь используются методы slideDown/slideUp, для отображения/скрытия элемента.
- fadeIn /fadeout – Изменение прозрачности элемента, для создания эффекта затухания.
- fadeTo – Изменяет прозрачность элемента в соответствии с переданным значением. Как нетрудно догадаться, он принимает дополнительный параметр opacity, где 0 это полная прозрачность, а 1 полная непрозрачность.
В качестве дополнительной функциональности, метод toggle , может принимать в качестве параметра выражение, решающее отображать элемент, или прятать.
Например, если вы хотите переключать только те элементы списка, которые имеют класс effect , ваш код будет выглядеть следующим образом:
$("li").toggle($(this).hasClass("effect"));
Проще говоря, функция toggle проверяет выражение, переданное ему в качестве параметра, и если оно истинно, то он переключает видимость элемента. Выражение, которые мы передали, в примере, проверяет наличие у элемента определенного класса.
Шаг 3. Создание собственной анимацииОчень часто, встроенные методы не удовлетворяют вашим потребностям, в этом случае вы, скорее всего, захотите создать свои собственные эффекты. С помощью jQuery вы легко сможете это сделать.
Чтобы создать персональный анимационный эффект, вам понадобится метод animate . Это выглядит следующим образом:
$("#somelement").animate({property: value}, );
Метод animate весьма похож на любые другие методы тем, что используется точно так же. Мы получаем элемент, и затем передаем ему некоторые параметры. Принимаемые параметры – это то, в чем метод animate отличается от готовых эффектов.
Параметры speed и callback выполняют те же функции, что и в предыдущих методах. Объект со свойствами, состоящими из определенного количества пар ключ/значение – то, что делает этот метод уникальным. Вы передаете каждое свойство, которое хотите анимировать, вместе с финальным результатом. Например, предположим, вы хотите анимировать изменение ширины элемента, на 90% от его текущего значения. Это можно сделать следующим образом:
$("#somelement").animate({width: "90%"}, 350, function(){ alert ("The animation has finished running."); });
Указанный пример кода, анимирует изменение ширины на 90%, а затем выдает сообщение, что анимация завершена.
Заметьте, что вы не ограничены в количестве. Вы можете добавить анимацию большому массиву свойств, включая прозрачность, поля, отступы, рамки, размеры шрифтов. Метод animate , удобен еще и потому, что может работать с любыми единицами измерения. Пиксели, ems, проценты – все работает. Так что, даже, представленный ниже, запутанный пример кода, будет работать. Правда выглядеть будет не очень понятно.
$("#somelement").animate({ width: "90%" fontSize: "14em", height: "183px", opacity: 0.8, marginTop: "2cm", marginLeft: "0.3in", borderBottom: "30mm", }, 350, function(){alert ("The animation has finished running.");});
При указании свойства, состоящего из нескольких слов, оно записывается без тире, и первая буква второго слова должна быть заглавной. Такая запись значительно отличается от привычного синтаксиса CSS, поэтому обязательно постарайтесь это запомнить. Например, свойство border-top , следует записывать borderTop .
Обратите внимание : jQuery позволяет анимировать только числовые значения свойств. Это значит, что вы не сможете анимировать цветовые свойства, используя только jQuery. Но все не так плохо. С небольшой помощью jQuery UI, вы сможете добавить анимацию цвета очень легко.
Шаг 4. Настройка эффектаЕсли вы рассмотрите простой эффект на демонстрационной странице, то возможно заметите небольшую ошибку. Многократное наведение мыши на элемент, приводит к образованию длинной очереди из повторяющихся анимационных эффектов. В результате появляется неприятный, дергающийся эффект.
Самый простой способ решить эту проблему – использовать метод stop , непосредственно до начала анимации. Этот метод отлично очищает очередь, и анимация выполняется в обычном режиме.
Например, это ваш обычный код:
$("#someelement") .hover(function() { $(this).animate({ top: 20 }, "fast"); }, function() { $(this).animate({ top: 0 }, "fast"); });
Используя метод stop для предотвращения лишних повторений анимации, ваш новый код будет выглядеть вот так:
$("#someelement") .hover(function() { $(this).stop().animate({ top: 20 }, "fast"); }, function() { $(this).stop().animate({ top: 0 }, "fast"); });
Очень просто, правда? Но этот метод имеет одну небольшую проблему. Быстрые движения не приводят к повторяющемуся эффекту, но за это приходится расплачиваться неполной анимацией. Если вы хотите полностью решить эту проблему, вам понадобится плагин наподобие hoverFlow .
Шаг 5. Добавление реализма – EasingЕсли хотите добавить чуть больше реализма, вам понадобится дополнительный контроль над скоростью, с которой выполняется анимация. Вот здесь нам на помощь приходит easing. Easing контролирует ускорение и замедление анимации по времени.
Метод, который easing использует по умолчанию, называется swing , он встроен в базовый функционал jQuery. Плагин Роберта Пеннера easing , позволит вам использовать несколько различных эффектов.
Существует только одно предостережение, когда речь идет об использовании персональных эффектов easing: вы можете использовать их только вместе со специальными эффектами анимации, то есть, с методом animate() . После того, как вы подключили плагин, использовать любой метод easing очень просто, передав его в качестве параметра:
$("#somelement").animate({ width: "90%" height: "183px", }, 550, "easeInElastic");
Вы можете проверить, как выглядят различные эффекты easing в действии, на демо-странице, в соответствующем разделе. И хотя некоторые из эффектов не подходят ко всем ситуациям, ваша анимация будет выглядеть гораздо более привлекательной при правильном использовании некоторых методов easing.
Шаг 6. Поднимаемся на ступеньку выше – jQuery UIАпгрейд до jQuery UI приносит нам ряд необходимых функций. Фактически, для использования дополнительных функций, вам не потребуется полная библиотека. Для получения нужной функциональности, вам потребуются встроенные эффекты. Не само ядро UI, только файл со встроенными эффектами, который весит около 10 килобайт.
Наиболее важными функциями, которые предоставляет библиотека эффектов jQuery UI, является поддержка анимации цветов, easing и переходы классов.
Если помните, я уже говорил, что в jQuery анимацию можно применить только к числовым значениям. С jQuery UI об этом ограничении можно забыть. Теперь вы легко сможете анимировать фоновый цвет элемента, цвет рамки и тому подобное. Кроме того, вместо того чтобы создавать отдельные функции для новых возможностей, jQuery UI просто расширяет базовый функционал animate . То есть, если вы включили библиотеку в свою страницу, то можете использовать обычный метод animate , и он сделает всю грязную работу за вас.
Например, если вы хотите анимировать цвет рамки элемента, при наведении, то ваш код будет выглядеть следующим образом:
$(".block").hover(function() { $(this).animate({ borderColor: "black" }, 1000); },function() { $(this).animate({ borderColor: "red" }, 500); });
Переходы классов отвечают за анимацию между классами. При использовании базовой библиотеки jQuery, если вы удаляете, а затем добавляете класс, изменяющий внешний вид элемента, то это происходит мгновенно. Когда в вашем распоряжении имеется библиотека UI, вы получаете возможность передавать дополнительные параметры, управляющие скоростью анимации, метод easing и callback . Эта функциональность, как и предыдущие, является надстройкой над существущим API jQuery, облегчающей процесс перехода.
Шаг 7. Создание первого, настоящего эффектаВсе вышеуказанные примеры являются всего лишь демо-версиями функциональности. Неплохо было бы использовать их для создания настоящего эффекта. Именно этим мы и займемся. Наш эффект не будет чем-то радикальным или особенным, но с его помощью, вы узнаете как применить полученные знания на практике.
Предположим, нам нужно отобразить картинку, внутри которой будут появляться две секции, при наведении мыши. Верхняя секция будет содержать заголовок картинки, нижняя – ее краткое описание. Я знаю, что вы можете найти огромное количество различных плагинов, которые делают то же самое, но сегодня мы сделаем это с нуля. Это не так сложно, как кажется. Фактически, это очень просто и делается довольно быстро. Давайте начнем.
HTMLДля начала нам понадобится HTML-основа
Анимация с JQuery для начинающих Простой пример использования
Простой пример использования возможностей анимации jQuery. Наведите курсор на картинку, чтобы увидеть ее название и описание. При отведении мыши, они скроются. При наведении курсора на блоки с названием и описанием изображения, они изменят фоновый цвет.
Анимация использует easing, для создания большей привлекательности.
ThemeForest
Сайт, где вы найдете множество шаблонов и тем
CodeCanyon
Сайт, содержащий множество скриптов и примеров кода.
Для этого эффекта, нам нужно продумать структуру каждого элемента. Каждый элемент будет заключен в div, с классом item . Внутри дива, будет размещено три элемента: картинка, и два дива, содержащих название и описание картинки.
Остальные части довольно простые. Нам понадобится подключить на страницу библиотеку jQuery, jQuery UI и файл, содержащий наш персональный код. Помните, что нам необходимы только эффекты jQuery UI, если вы хотите включить больше эффектов, вам понадобится специальная сборка, скачать которую можно здесь.
Вот так будет выглядеть наша страница на этом этапе.
CSS .item { position: relative; margin: 20px 60px 40px 0; overflow: hidden; } .item .title, .item .desc { background: #000; color: #fff; position: absolute; display: block; width: 638px; opacity: 0.4; } .item .title { top: 0; font-size: 16px; padding: 12px 10px 25px 0; text-align: rightright; } .item .desc { bottom: 0; font-size: 12px; padding: 5px 0 15px 10px; }Здесь есть несколько моментов, на которые вам стоит обратить внимание. Каждому элементу установлено свойство position в значение relative , для того чтобы внутри этого элемента легко было расположить другие. Также, блокам назначено свойство overflow: hidden , с тем, чтобы мы могли скрывать название и описание картинки снаружи, когда они не нужны.
Блокам, которые содержат название и описание, установлено свойство position: absolute , так что они точно позиционируются внутри блока с картинкой. Заголовку назначена координата top: 0 , так что он располагается вверху, а описанию bottom: 0 , и он соответственно, расположен внизу.
Остальной CSS очень простой, назначены стили для шрифтов, немного позиционирования. Ничего особенного.
Теперь наша страница выглядит вот так.
Возможно, это выглядит немного сложно, но на самом деле это не так. Давайте рассмотрим каждую часть.
Логика этого эффекта очень проста. Поскольку мы позиционировали элементы абсолютно, сначала мы прячем их за пределами блока с картинкой. При наведении мыши на изображения, нам нужно просто вернуть их обратно, к изначальному положению.
Сначала мы передвигаем заголовок и описание за пределы родительского блока. Но вместо того, чтобы использовать CSS, мы делаем это помощью JavaScript, по весьма конкретным причинам. Даже если JS будет отключен, страница все равно останется функциональной. Заголовок и описание останутся поверх изображения, и будут выглядеть так, как будто применен эффект наведения. А вот если бы мы скрыли эти блоки с помощью CSS, и JS на странице был бы отключен, то они так бы и не появились на экране.
Наш код начинается с создания функции hover для каждого элемента. Первая функция выполняется при наведении мыши, вторая – наоборот, при отведении.
Внутри функции, this – указывает на элемент, который вызвал событие. Мы используем метод animate , для изменения соответствующих значений. Мы также используем easing , для добавления большей привлекательности нашему эффекту. При отведении мыши, мы просто изменяем значения к их изначальному состоянию.
В качестве небольшого дополнения, если навести курсор на блоки с заголовком или описанием, они медленно изменят цвет, спасибо jQuery UI.
Вот и все, наш эффект готов к использованию. Можете посмотреть на и с приведенными примерами.
Метод JQuery одушевленные () позволяет создавать пользовательские анимации.
Примеры анимации JQuery
JQuery анимации - одушевленное () методМетод JQuery одушевленные () используется для создания пользовательских анимации.
Синтаксис:
$(selector ).animate({params },speed,callback );
Обязательные Params параметр определяет формирование свойств CSS анимации.
Необязательный параметр скорости определяет длительность эффекта. Он может принимать следующие значения: "медленные", "быстрые" или миллисекунды.
Необязательный параметр обратного вызова является имя функции выполняемой после завершения.
Следующий пример демонстрирует способ простое приложение одушевленные (). Это элемент вправо, чтобы переместить 250 пикселей:
JQuery одушевленные () - работает несколько свойств
Обратите внимание, что процесс создания анимации может использовать несколько свойств:
JQuery одушевленные () - использование относительного значения
Кроме того, можно определить относительную величину (значение по отношению к текущему значению элемента). Нужно предшествовать значение с + = или - =:
() JQuery одушевленным - использовать заданное значениеВы даже можете поместить значение свойства анимации "шоу", "скрыть" или "тумблер":
JQuery одушевленные () - С помощью функции QueueПо умолчанию, JQuery предоставляет возможности организации очередей для анимации.
Это означает, что если вы пишете больше, чем один за другим вызовом одушевленные (), JQuery создает вызов метода эти "внутренние" очереди. Потом один за другим, чтобы запустить эти анимации вызовов.
Пример 1$("button").click(function(){
var div=$("div");
div.animate({height:"300px",opacity:"0.4"},"slow");
div.animate({width:"300px",opacity:"0.8"},"slow");
div.animate({height:"100px",opacity:"0.4"},"slow");
div.animate({width:"100px",opacity:"0.8"},"slow");
jQuery делает тривиальным добавление простых эффектов на страницу. Эффекты могут использовать встроенные настройки или подгонять продолжительность анимации индивидуально. Вы также можете создавать собственную анимацию произвольных свойств CSS.
Смотрите более подробную информацию об эффектах jQuery в документации .
Важное замечание об анимации. В современных браузерах, особенно на мобильных устройствах, часто анимацию гораздо более эффективно получить с помощью CSS, а не JavaScript. Подробности этом выходят за рамки данного руководства, но если вы ориентируетесь только на мобильные устройства или браузеры, которые поддерживают анимацию через стили, то должны использовать для анимации CSS, там где это возможно. Вы также можете установить jQuery.fx.off как true на устройствах с ограниченными ресурсами; это немедленно установит методы анимации для элементов в требуемое состояние, при котором анимация не происходит.
Встроенные эффектыЧасто используемые эффекты встроены в jQuery как методы, которые вы можете вызвать для любого объекта jQuery:
- .show() - показать выбранные элементы;
- .hide() - скрыть выбранные элементы;
- .fadeIn() - анимация прозрачности выбранных элементов до 0%;
- .fadeOut() - анимация прозрачности выбранных элементов до 100%;
- .slideDown() - отображение выбранных элементов с помощью вертикального скользящего движения;
- .slideUp() - сокрытие выбранные элементы с помощью вертикального скользящего движения;
- .slideToggle() - показать или скрыть выбранные элементы с вертикальным скользящим движением в зависимости от того, видны элементы в данный момент или нет.
После создания выборки мы просто применяем к ней эффект.
$(".hidden").show();
Вы также можете указать длительность встроенных эффектов. Есть два способа сделать это: можете задать время в миллисекундах
$(".hidden").show(300);
или использовать одну из предустановленных скоростей:
$(".hidden").show("slow");
Предустановленные скорости указаны в объекте jQuery.fx.speeds . Вы можете изменить этот объект, чтобы переопределить значения по умолчанию или расширить его новыми именами:
// Переустановить имеющуюся предустановленную скорость jQuery.fx.speeds.fast = 50; // Создать новую предустановленную скорость jQuery.fx.speeds.turtle = 3000; // Поскольку мы переустановили скорость "fast", то теперь анимация // длится 50 миллисекунд $(".hidden").hide("fast"); // После их создания мы можем использовать пользовательские скорости // подобно встроенным $(".other-hidden").show("turtle");
Часто вам требуется сделать что-то после завершения анимации - если вы попытаетесь сделать это до окончания анимации, то это может повлиять на качество анимации или привести к удалению элементов, которые являются частью анимации. Вы можете предоставить функцию обратного вызова для методов анимации, если желаете указать, что должно произойти после завершения эффект. Внутри этой функции this указывает на исходный элемент DOM, к которому применялся эффект. Подобно событиям мы можем превратить его в объект jQuery через $(this) .
$("p.old").fadeOut(300, function() { $(this).remove(); });
Обратите внимание, что если выборка не содержат каких-либо элементов, то ваша функция обратного вызова никогда не будет выполнена! Если вам требуется выполнить функцию независимо от того, есть элементы в выборке или нет, то вы можете создать функцию и использовать её так:
Var oldElements = $("p.old"); var thingToAnimate = $("#nonexistent"); // Эта функция будет «обратным вызовом» для метода show, // когда элементы будут показаны. В противном случае мы просто // вызовем её незамедлительно var removeOldElements = function() { oldElements.remove(); }; if (thingToAnimate.length) { // Когда передаётся в качестве функции обратного вызова для show, // эта функция будет вызвана после завершения анимации thingToAnimate.show("slow", removeOldElements); } else { removeOldElements(); }
Произвольные эффекты с.animate()Если встроенные анимации не подходят, вы можете использовать .animate() для создания произвольной анимации большинства свойств CSS. Учтите, что вы не можете анимировать свойство color , но есть плагин , который делает его возможным.
У метода .animate() есть три аргумента:
- объект, определяющий свойства для анимации;
- продолжительность анимации в миллисекундах;
- функция обратного вызова, которая будет вызываться после окончания анимации.
Метод .animate() может анимировать до указанного конечного значения или увеличить существующее значение.
$(".funtimes").animate({ left: "+=50", // увеличить на 50 opacity: 0.25, fontSize: "12px" }, 300, function() { // выполняется, когда анимация завершена });
Обратите внимание, что если вы хотите анимировать свойство CSS, название которого включает дефис, то нужно использовать
JQuery – прекрасная библиотека, существенно разнообразившая в последние годы подходы разработчиков к решению стоящих перед ними задач. При появлении jQuery CSS не могла создавать сложные анимации; для их создания использовался JavaScript. jQuery упростила создание анимации на порядок. Библиотека содержит простейшие анимации (fadeIn(), hide(),slideDown() и т.д.) и позволяет создавать любую анимацию с помощью метода animate() . Описанию этого метода и посвящена эта статья.
jQuery animate() - метод-оболочка, то есть работает с заранее выбранным набором элементов DOM, обернутых jQuery. Метод позволяет применять требуемые эффекты анимации к элементам в наборе. Осуществление вышесказанного на практике делается возможным благодаря наличию набора свойств CSS и значений, которые эти свойства примут по завершении исполнения анимаций. Промежуточные значения, которые стиль будет иметь по достижении желаемого эффекта (автоматически контролируемые анимационным движком), определяются продолжительностью эффекта и функцией-easing; две эти опции будут рассмотрены ниже.
Список подвергающихся анимации свойств CSS ограничивается теми, которые могут принимать численные значения. Значения могут быть абсолютными (например 200), или относительными. При абсолютных значения используемая по умолчанию единица jQuery – пиксели. Мы также можем использовать специфические единицы: em, rem или проценты. Чтобы задать относительные значение используются префиксы += или -= ; префиксы направляют целевое относительное значение в положительном или отрицательном направлении, соответственно.
Параметры и сигнатура метода animate()Метод имеет две основные формы; большинство используемых параметров необязательные (заключены в квадратные скобки).
- animate(properties[, duration][, easing][, callback])
- animate(properties[, options])
Собственно, параметры:
- properties (Объект): список css-свойств, содержащий достигаемые в конце анимации значения.
- duration (Число|Строка): продолжительность эффекта в миллисекундах или одна из заранее установленных строк: “ slow ” (600ms), “ normal ” (400ms), или “ fast ” (200ms). Значение по умолчанию – “ normal ”.
- easing (Строка): Используемое при переходе (transition) имя функции-easing (которая определяет изменение скорости анимации). Значение по умолчанию “ swing ”.
- callback (Функция): Функция, исполняемая по завершении анимации для каждого анимированного элемента.
- options (Объект): объект, содержащий набор свойств (дополнительные опции), которые будут переданы методу. Доступны следующие свойства:
- always (Функция): функция, вызываемая по завершении анимации или когда исполнении анимации останавливается (но не завершается).
- complete (Функция): исполняемая функция по завершении анимации.
- done (Функция): вызываемая по завершении анимации функция.
- duration (Строка|Число): описана выше.
- easing (Строка): описана выше.
- fail (Функция): исполняется при неудачной попытке анимации.
- progress (Функция): Исполняется после каждого шага анимации. Вызывается один раз для каждого элемента после исполнения его анимации.
- queue (Boolean): когда анимацию надо поместить в очередь эффектов/функций (effects queue (подробности ниже). Значение по умолчанию - true .
- specialEasing (Объект): объект, параметрами которого являются css-свойства, чьими значениями являются функции-перехода
- start (Функция): исполняется, когда анимации начинает совершаться.
- step (Функция): функция, вызываемая для каждого анимированного свойства каждого анимированного элемента.
Термин easing используется для описания способа, который управляет обработкой и задает скорость кадров анимации. Анимация исполняется последовательно, если опция queue задана как true , и параллельно (без очереди) – если как false .
Примеры использования метода animate()Применим этот метод на практике. Замечу, что при исполнении анимаций сложного порядка, созданных этим методом, могут возникнуть ошибки. То есть для очень сложных анимаций этот метод лучше избегать.
Одиночная анимацияСоздать одиночную анимацию предельно просто, достаточно одного вызова. К примеру, нужно передвинуть элемент из одной стороны блока к другой. Чтобы проиллюстрировать эту анимацию, создадим два div элемента, один внутри другого. Стиль следующий: фон внутреннего div – красный. Код:
HTML CSS .rectangle { width: 300px; height: 20px; display: block; position: relative; border: 1px solid black; margin: 20px 0; } .square-small { display: block; width: 20px; height: 20px; position: absolute; background-color: red; }Применим animate() и передвинем маленький квадрат из одной стороны к другой:
jQuery $(".rectangle") .find(".square-small") .animate({ left: 280 }, "slow");Анимируется только свойство left . Продолжительность анимации - заранее заданное значение slow (600мс). Внутренний (класс которого.square-small) передвигается, использую абсолютное значение. Значение выбирается в зависимости от ширины контейнера, заданного приведенным выше кодом CSS. Это решение далеко от идеального. Так, если изменить ширину контейнера, внутренний не достигнет другой стороны (если ширину увеличить) или минует ее (если ширину уменьшить). Чтобы избежать этого, свойству left нужно задать значение, зависимое от расчета текущей ширины внутреннего и внешнего :
jQuery left: $(".rectangle").width() - $(".rectangle").find(".square-small").width() Запускаем множественную анимацию в циклеИсполнение ряда анимаций на одном элементе или наборе элементов не сложнее создания последовательности (цепочки) вызовов метода animate() . Опять передвинем маленький квадрат; двигаться он будет по периметру песочных часов, находящихся внутри большого квадрата (а не прямоугольника). Для создания демо используем следующую разметку:
HTMLДля.square-small воспользуемся приведенным CCS-кодом из предыдущего примера. Стиль внешнего квадрата:
CSS .square-big { width: 300px; height: 300px; display: block; position: relative; border: 1px solid black; margin: 20px 0; }Последний шаг: нужно написать JavaScript код для четырех линий, образующих периметр песочных часов. Маленький квадрат анимируется начиная с его положения вверху и слева на внешнем квадрате, пока он не достигнет нижний правый угол большого квадрата. Для создания нужного эффекта маленький квадрат должен двигаться по диагонали. По достижении им нижнего правого угла его нужно переместить в нижний левый угол, затем – в верхний правый угол, и, наконец, - в начальную позицию.
Теперь зациклим анимацию, то есть сделаем так, чтобы по окончании анимации она начиналось вновь. Чтобы сделать это мы можем заключить вызов 4-х функций animate() внутри функции, которая, свою очередь, вызывается внутри другой функции. То есть создадим функцию, на которую можно ссылаться. Затем мы можем воспользоваться функцией complete и заново запустить анимацию после последнего шага.
jQuery (function animation() { var options = { duration: 800, easing: "linear" }; $(".square-big") .find(".square-small") .animate({ left: 280, top: 280 }, options) .animate({ left: 0, }, options) .animate({ left: 280, top: 0, }, options) .animate({ left: 0, }, $.extend(true, {}, options, { complete: function() { animation(); } })); })();Заметьте, чтобы при вызове animate() не писать одни и те же параметры по несколько раз, была использована переменная options . Кроме того на последнем шаге обратимся к функции complete() посредством метода JQuery extend() .
Больше функций обратного вызоваТакже как в нашем последнем примере зададим свойства start, complete, и progress посредством параметра options (второй параметр из второй формы). Цель – отключить кнопку, нажатие по которой запускает анимацию, когда анимация (уже) выполнена. Вторая задача – показать в процентном соотношении, какая часть от общего выполнения анимации была исполнена. Для этого примера используем первую демку с внесенными в нее необходимыми правками.
Чтобы сделать возможным показ процентного соотношения, создадим кнопку и элемент (span). Разметка:
HTML Run! 0%Стиль не меняется, поэтому сразу перейдем к обсуждению JavaScript кода. Чтобы анимация запускалась только при нажатии на кнопку, создадим обработчик событию click кнопки. Внутри обработчика включение и отключение кнопки осуществляется методом jQuery prop() ( prop на jquery.page2page). Метод основан на зависимости от того, исполняется ли анимация в данный момент или уже исполнена. Наконец, использован второй аргумент у метода progress, который, в свою очередь, является свойством объекта options ; он показывает процентное соотношение (от общего выполнения анимации). Код:
jQuery $("#animation-button").click(function() { var $button = $(this); $(".rectangle") .find(".square-small") .animate({ left: 280 }, { duration: 2000, start: function() { $button.prop("disabled", true); }, complete: function() { $button.prop("disabled", false); }, progress: function(animation, progress) { $("#percentage").text(Math.round(progress * 100)); } }); }); ЗаключениеБыл рассмотрен jQuery animate() метод, показаны его сигнатура и принимаемые им параметры. Статья привела три примера использования анимации. Конечно, возможности animate() гораздо шире рассмотренных здесь. Если приложить усилия и подойти к созданию анимации с творческим подходом, то результат может быть действительно впечатляющим. Как, например, этот jQuery плагин Audero Smoke Effect , создающий эффект дыма для одного или нескольких элементов (обычно изображений) веб-страницы.
