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

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

Вступление

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

Шаг 1. Основы jQuery

jQuery – это 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 очень простой, назначены стили для шрифтов, немного позиционирования. Ничего особенного.

Теперь наша страница выглядит вот так.

Включаем JavaScript-магию $(document).ready(function() { // Code for other parts of the demo $(".item").children("div.title").animate({top: -60}, 300); $(".item").children("div.desc").animate({bottom: -40}, 300); $(".item").hover(function() { $(this).children("div.title").stop().animate({top: 0}, 700, "easeOutBounce"); $(this).children("div.desc").stop().animate({bottom: 0}, 700, "easeOutBounce"); }, function(){ $(this).children("div.title").stop().animate({top: -60}, 500); $(this).children("div.desc").stop().animate({bottom: -40}, 400); }); $(".title, .desc").hover(function() { $(this).stop().animate({backgroundColor: "#444"}, 700, "easeOutSine"); }, function(){ $(this).stop().animate({backgroundColor: "#000"}, 700); }); });

Возможно, это выглядит немного сложно, но на самом деле это не так. Давайте рассмотрим каждую часть.

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

Сначала мы передвигаем заголовок и описание за пределы родительского блока. Но вместо того, чтобы использовать CSS, мы делаем это помощью JavaScript, по весьма конкретным причинам. Даже если JS будет отключен, страница все равно останется функциональной. Заголовок и описание останутся поверх изображения, и будут выглядеть так, как будто применен эффект наведения. А вот если бы мы скрыли эти блоки с помощью CSS, и JS на странице был бы отключен, то они так бы и не появились на экране.

Наш код начинается с создания функции hover для каждого элемента. Первая функция выполняется при наведении мыши, вторая – наоборот, при отведении.

Внутри функции, this – указывает на элемент, который вызвал событие. Мы используем метод animate , для изменения соответствующих значений. Мы также используем easing , для добавления большей привлекательности нашему эффекту. При отведении мыши, мы просто изменяем значения к их изначальному состоянию.

В качестве небольшого дополнения, если навести курсор на блоки с заголовком или описанием, они медленно изменят цвет, спасибо jQuery UI.

Вот и все, наш эффект готов к использованию. Можете посмотреть на и с приведенными примерами.

Анимация происходит за счет плавного изменения CSS-свойств у элементов. Функция имеет два варианта использования:

properties
duration — продолжительность выполнения анимации. Может быть задана в миллисекундах или строковым значением "fast" или "slow" (200 и 600 миллисекунд).
easing — изменение скорости анимации (будет ли она замедляется к концу выполнения или наоборот ускорится). (см. описание ниже)
callback — функция, которая будет вызвана после завершения анимации.

properties — список CSS-свойств, участвующих в анимации и их конечных значений. (см. описание ниже)
options — дополнительные опции. Должны быть представлены объектом, в формате опция:значение. Варианты опций:

duration — продолжительность выполнения анимации (см. выше). easing — изменение скорости анимации (будет ли она замедляется к концу выполнения или наоборот ускориться). (см. описание ниже) complete — функция, которая будет вызвана после завершения анимации. step — функция, которая будет вызвана после каждого шага анимации. queue — булево значение, указывающее, следует ли помещать текущую анимацию в очередь функций . В случае false , анимация будет запущена сразу же, не вставая в очередь. specialEasing — позволяет установить разные значения easing, для разных CSS-параметров. Задается объектом, в формате параметр:значение. Опция была добавлена в jQuery 1.4. Выполнение нескольких анимаций

При одновременном вызове нескольких эффектов, применительно к одному элементу, их выполнение будет происходить не одновременно, а поочередно. Например при выполнении следующих команд:

$("#my-div" ) .animate ({ height: "hide" } , 1000 ) ; $("#my-div" ) .animate ({ height: "show" } , 1000 ) ;

элемент с идентификатором my-div , в начале будет плавно исчезать с экрана, а затем начнет плавно появляться вновь. Однако, анимации, заданные на разных элементах, будут выполняться одновременно:

$("#my-div-1" ) .animate ({ height: "hide" } , 1000 ) ; $("#my-div-2" ) .animate ({ height: "show" } , 1000 ) ;

Параметр properties

Задается объектом, в формате css-свойство:значение. Это очень похоже на задание группы параметров в методе .css() , однако, properties имеет более широкий диапазон типов значений. Они могут быть заданы не только в виде привычных единиц: чисел, пикселей, процентов и др., но еще и относительно: {height:"+=30", left:"-=40"} (увеличит высоту на 30 пикселей и сместит вправо на 40). Кроме того, можно задавать значения "hide", "show", "toggle" , которые скроют, покажут или изменят видимость элемента на противоположную, за счет параметра, к которому они применены. Например

$("div" ) .animate ( { opacity: "hide" , height: "hide" } , 5000 ) ;

Скроет div-элементы, за счет уменьшения прозрачности и уменьшения высоты (сворачиванием) элемента.

Замечание 1 : Отметим, что в параметре properties можно указывать только те css-свойства, которые задаются с помощью числовых значений. Например, свойство background-color использовать не следует.

Замечание 2 : Величины, которые в css пишутся с использованием дефиса, должны быть указаны без него (не margin-left, а marginLeft).

Обработчик завершения анимации

Функция, заданная в качестве обработчика завершения анимации не получает параметров, однако, внутри функции, переменная this будет содержать DOM-объект анимируемого элемента. Если таких элементов несколько, то обработчик будет вызван отдельно, для каждого элемента.

Параметр easing

Этот параметр определяет динамику выполнения анимации — будет ли она проходить с замедлением, ускорением, равномерно или как то еще. Параметр easing задают с помощью функции. В стандартном jQuery доступны лишь две такие функции: "linear" и "swing" (для равномерной анимации и анимации с ускорением). По умолчанию, easing равняется "swing" . Другие варианты можно найти в плагинах, например, jQuery UI предоставляет более 30 новых динамик .

Существует возможность задавать разные значения easing для разных css-свойств, при выполнении одной анимации. Для этого нужно воспользоваться вторым вариантом функции animate() и задать опцию specialEasing . Например:

$("#clickme" ) .click (function () { $("#book" ) .animate ({ opacity: "toggle" , height: "toggle" } , { duration: 5000 , specialEasing: { opacity: "linear" , height: "swing" } } ) ; } ) ;

в этом случае изменение прозрачности будет происходить равномерно (linear), а высота будет изменяться с разгоном в начале и небольшим торможением в конце (swing).

В действии

При нажатии на кнопку, произведем некоторые манипуляции с элементом, используя метод animate:

~lt~!DOCTYPE html~gt~ ~lt~html~gt~ ~lt~head~gt~ ~lt~style~gt~ div { background-color:#bca; width:100px; border:1px solid green; } ~lt~/style~gt~ ~lt~script src="http://code.jquery.com/jquery-latest.min.js"~gt~~lt~/script~gt~ ~lt~/head~gt~ ~lt~body~gt~ ~lt~button id="go"~gt~» Съешь пирожок~lt~/button~gt~ ~lt~div id="block"~gt~Алиса~lt~/div~gt~ ~lt~script~gt~ // Произведем изменение нескольких css-величин в ходе одной анимации. $("#go").click(function(){ $("#block").animate({ width: "70%", // ширина станет 70% opacity: 0.4, // прозрачность будет 40% marginLeft: "0.6in", // отступ от левого края элемента станет равным 6 дюймам fontSize: "3em", // размер шрифта увеличится в 3 раза borderWidth: "10px" // толщина рамки станет 10 пикселей }, 1500); // анимация будет происходить 1,5 секунды }); ~lt~/script~gt~ ~lt~/body~gt~ ~lt~/html~gt~

Ссылки

Поисковые ключи:

• пользовательская анимация
• выполнение анимации
• анимация заданная пользователем
• эффекты заданные пользователем
• .animate()
• animate()

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 , создающий эффект дыма для одного или нескольких элементов (обычно изображений) веб-страницы.

Сохраните эту страницу для тестирования приведенных ниже примеров.

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

Назначением большинства базовых эффектов является простое отображение или сокрытие элементов. Методы, используемые для этой цели, описаны в таблице ниже:

Методы для создания базовых эффектов Метод Описание

hide()	Немедленно скрывает все элементы, содержащиеся в объекте jQuery
hide(продолжительность), hide(продолжительность, стиль)	Плавно скрывает элементы, содержащиеся в объекте jQuery, в течение заданного времени с возможностью указания стиля анимации
hide(продолжительность, функция), hide(продолжительность, стиль, функция)	Скрывают все элементы, содержащиеся в объекте jQuery, в течение заданного времени с возможностью указания стиля анимации и функции, которая вызывается по завершении создания эффекта
show()	Немедленно отображает все элементы, содержащиеся в объекте jQuery
show(продолжительность), show(продолжительность, стиль)	Отображают все элементы, содержащиеся в объекте jQuery, в течение заданного времени с возможностью указания стиля анимации
show(продолжительность, функция), show(продолжительность, стиль, функция)	Отображают все элементы, содержащиеся в объекте jQuery, в течение заданного времени с возможностью указания стиля анимации и функции, которая вызывается по завершении создания эффекта
toggle()	Немедленно переключает (отображает, если они скрыты, и скрывает, если они отображаются) видимость элементов, содержащихся в объекте jQuery
toggle(продолжительность), toggle(продолжительность, стиль)	Переключают видимость элементов, содержащихся в объекте jQuery, в течение заданного времени с возможностью указания стиля анимации
toggle(продолжительность, функция), toggle(продолжительность, стиль, функция)	Переключают видимость элементов, содержащихся в объекте jQuery, в течение заданного времени с возможностью указания стиля анимации и функции, которая вызывается по завершении создания эффекта
toggle(логическое_значение)	Осуществляет одностороннее переключение видимости элементов, содержащихся в объекте jQuery

Пример использования методов show() и hide() без аргументов для создания простейших эффектов приведен ниже:

$(function() { $("СкрытьПоказать").appendTo("#buttonDiv") .click(function(e) { if ($(e.target).text() == "Скрыть") { $("#row1 div.dcell").hide(); } else { $("#row1 div.dcell").show(); } e.preventDefault(); }); }); Запустить пример

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

В обоих случаях указанная функция вызывается как метод объекта jQuery, созданного с помощью селектора #row1 div.cell. Таким образом, невидимыми или видимыми будут становиться те объекты div, принадлежащие классу dcell, которые являются потомками элемента с атрибутом id, равным row1.

В данном случае переход элементов из одного состояния в другое выполняется немедленно, без анимации. Он не сопровождается какими-либо задержками или эффектами, и все элементы появляются или исчезают сразу же после щелчка. Вызов метода hide() для элементов, которые уже сделаны невидимыми, равно как и вызов метода show() для элементов, которые уже сделаны видимыми, не дает никакого эффекта. Наконец, обратите внимание, что при сокрытии или отображении элемента одновременно с ним скрываются или отображаются все его потомки.

Переключение видимости элементов

Для перевода элементов из видимого состояния в невидимое и наоборот используется метод toggle() . Соответствующий пример приведен ниже:

$(function() { $("Переключить").appendTo("#buttonDiv") .click(function(e) { $("div.dcell:first-child").toggle(); e.preventDefault(); }); }); Запустить пример

В этом примере мы добавляем в документ единственную кнопку, после щелчка на которой вызывается метод toggle(), изменяющий видимость тех элементов div.dcell, которые являются первыми дочерними элементами своих родителей.

Обратите внимание на сворачивание структуры документа в окрестности скрытых элементов. Если вы хотите скрыть элементы таким образом, чтобы область, которую они занимали, отображалась на странице, установите для CSS-свойства visibility значение hidden.

Одностороннее переключение видимости элементов

Передача методу toggle() логического (булевого) значения позволяет налагать ограничения на возможные направления изменения состояния видимости элементов. Если в качестве аргумента методу toggle() передается значение true, то это приведет лишь к отображению скрытых элементов (при этом видимые элементы скрываться не будут). Передача значения false обеспечивает противоположный эффект: видимые элементы скрываются, но скрытые элементы не становятся видимыми.

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

Анимация видимости элементов

Процесс отображения и сокрытия элементов можно анимировать, передавая методу show(), hide() или toggle() параметр, задающий длительность анимации. В этом случае процесс сокрытия или отображения элементов будет осуществляться плавно на протяжении указанного периода. Возможные варианты задания продолжительности периода анимации перечислены в таблице ниже:

Пример анимации отображения и сокрытия элементов приведен ниже. В этом примере для задания длительности анимационного перехода мы используем строковый параметр fast, с помощью которого указываем, что на переключение видимости элементов img в документе отводится 600 мс:

$(function() { $("Переключить").appendTo("#buttonDiv") .click(function(e) { $("img").toggle("fast", "linear"); e.preventDefault(); }); }); Запустить пример

Указывая длительность периода анимации в миллисекундах, не заключайте значение в кавычки. Например, следует использовать запись $("img").toggle(500), а не $("img").toggle("500"). При наличии кавычек указанное значение будет проигнорировано, и вместо него будет использовано внутреннее значение, установленное по умолчанию.

Вызывая в этом сценарии метод toggle(), мы также передаем ему дополнительный аргумент, называемый функцией смягчения (easing function) или стилем смягчения (easing style) , с помощью которого задаем требуемый стиль анимации.

Под смягчением здесь понимается смягчение анимационного перехода путем регулирования его скорости в процессе анимации. Доступны два предустановленных стиля смягчения: swing и linear . Стилю swing соответствует медленное начало анимации с последующим ее ускорением и повторным замедлением в конце анимации. Стилю linear соответствует постоянная скорость анимации на протяжении всего процесса. Если этот аргумент опущен, то по умолчанию используется значение swing.

Использование функций обратного вызова в эффектах

Методам show(), hide() и toggle() можно передавать в качестве аргумента функцию, которая будет вызвана по окончании анимации. Эту возможность можно использовать для обновления состояния других элементов, чтобы отразить изменения в их состоянии, как показано в примере ниже:

Поменять").insertAfter("#buttonDiv button") .click(function(e) { hideVisibleElement(); e.preventDefault(); }); function hideVisibleElement() { $(visibleRow).hide("fast", showHiddenElement); } function showHiddenElement() { $(hiddenRow).show("fast", switchRowVariables); } function switchRowVariables() { var temp = hiddenRow; hiddenRow = visibleRow; visibleRow = temp; } }); Запустить пример

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

Далее в документ добавляется кнопка (элемент button), после щелчка на которой вызывается функция hideVisibleElement(), использующая метод hide() для анимации сокрытия видимого ряда элементов. При этом мы указываем имя функции, которая должна быть вызвана по завершении эффекта, в данном случае - showHiddenElement.

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

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

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

$(function() { var hiddenRow = "#row2"; var visibleRow = "#row1"; $(hiddenRow).hide(); $("Поменять").insertAfter("#buttonDiv button") .click(function(e) { $(visibleRow).hide("fast", function() { $(hiddenRow).show("fast", function() { var temp = hiddenRow; hiddenRow = visibleRow; visibleRow = temp; }); }); e.preventDefault(); }); });

Эффекты плавного изменения высоты элементов

В библиотеке jQuery имеется ряд методов, предназначенных для создания эффектов плавного раскрытия и свертывания элементов путем изменения их высоты (так называемые эффекты скольжения). Эти методы приведены в таблице ниже:

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

$(function() { $("Свернуть развернуть").insertAfter("#buttonDiv button") .click(function(e) { $("h1").slideToggle("fast"); e.preventDefault(); }); }); Запустить пример

В этом примере метод slideToggle() используется для создания эффекта попеременного появления и исчезновения элемента h1 путем изменения его высоты.

Эффекты плавного изменения прозрачности элементов

В этом разделе рассматриваются методы, предназначенные для создания эффектов "растворения" элементов, которые используются для отображения и сокрытия элементов путем изменения их непрозрачности (или, если вам так больше нравится, путем изменения их прозрачности). Эти методы приведены в таблице ниже:

Методы для создания эффектов растворения Метод Описание

fadeOut(), fadeOut(продолжительность), fadeOut(продолжительность, функция), fadeOut(продолжительность, стиль, функция)	Скрывают элементы путем уменьшения их непрозрачности
fadeIn(), fadeIn(продолжительность), fadeIn(продолжительность, функция), fadeIn(продолжительность, стиль, функция)	Отображают элементы путем увеличения их непрозрачности
fadeTo(продолжительность, непрозрачность), fadeTo(продолжительность, непрозрачность, стиль, функция)	Изменяют непрозрачность до указанного уровня
fadeToggle(), fadeToggle(продолжительность), fadeToggle(продолжительность, функция), fadeToggle(продолжительность, стиль, функция)	Попеременно отображают и скрывают элементы с использованием непрозрачности

Наборы параметров, используемых в методах fadeIn() , fadeOut() и fadeToggle() , аналогичны наборам параметров, используемых в других методах, создающих эффекты. При вызове этих методов им можно передавать такие параметры, как длительность анимации, стиль анимации и функция обратного вызова, как это было продемонстрировано в предыдущих примерах.

Пример использования эффектов прозрачности приведен ниже:

$(function() { $("Переключить").insertAfter("#buttonDiv button") .click(function(e) { $("img").fadeToggle(); e.preventDefault(); }); }); Запустить пример

Метод fadeToggle() применен здесь к элементам img частично для демонстрации ограничений этого эффекта. В отличие от других эффектов, которые изменяют также размер выбранных элементов, эффект прозрачности затрагивает лишь параметр непрозрачности. Это означает, что методы fade() обеспечивают плавную анимацию лишь до тех пор, пока элементы не станут полностью прозрачными, после чего jQuery скрывает их, и компоновка страницы изменяется скачкообразно. В некоторых ситуациях такое поведение страницы может раздражать пользователей.

Анимация прозрачности до определенного значения

Для создания анимации, которая прекращается в тот момент, когда параметр непрозрачности достигает определенного значения, используется метод fadeTo() . Параметр непрозрачности может принимать значения в интервале от 0 (полная прозрачность) до 1 (полная непрозрачность). При этом свойство видимости элементов не изменяется, что позволяет избежать скачкообразного изменения компоновки страницы, о котором говорилось выше.

Пример использования метода fadeTo() приведен ниже:

$(function() { $("Растворить картинки").insertAfter("#buttonDiv button") .click(function(e) { $("img").fadeTo("fast", 0); e.preventDefault(); }); }); Запустить пример

В этом примере мы указали, что непрозрачность элементов должна уменьшаться до тех пор, пока они не станут полностью прозрачными. Производимый эффект в данном случае оказывается тем же, что и при использовании метода fadeOut(), однако по завершении анимационного перехода элементы не скрываются.

Уменьшать непрозрачность до нуля вовсе необязательно. Для этого параметра можно указать любое другое значение в пределах допустимого интервала (0 - 1).

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

Дизайн веб-сайта играет главную роль в привлечении посетителей на постоянной основе. Интерактивный дизайн привлекает больше внимания по сравнению с обыкновенным статичным дизайном.

Технологии улучшаются быстрыми темпами, чтобы удовлетворить потребности современного веб-дизайна. В результате CSS3 предлагает реализацию анимации без помощи JavaScript. И хотя CSS3 и HTML5 постоянно улучшаются, jQuery остаётся популярным методом создания интерактивного дизайна.

Давайте приступим!

Практическое использование анимации в jQuery

jQuery широко используется для разработки интерактивных элементов, таких как слайдеры, меню, скроллеры и другие. До того, как мы перейдём непосредственно к анимации, я предлагаю вам взглянуть на следующие практические примеры реализации, иллюстрирующие мощь анимации в jQuery.

• Боковое скольжение при прокрутке ;
• Слияние рамок изображений с помощью jQuery ;
• Анимация «Ночные сны» ;
• Анимация открытия занавеса с помощью jQuery ;
• Создание раздвигающегося меню навигации с помощью jQuery .

Вы, как новичок, не сможете сразу повторить то, что приведено в этих примерах. Поэтому далее мы разберём основы анимации в jQuery с точки зрения новичков.

Скачать исходные коды Демонстрация

Введение в основы анимации в jQuery

Большинство дизайнеров имеют понятие об основах работы с кодом jQuery или JavaScript. Изменение видимости элемента – распространённая задача, которая встречается почти на всех веб-сайтах.

Мы можем просто скрыть/отобразить элемент, используя CSS атрибуты display или visibility . jQuery упрощает процесс, представляя две функции hide и show . Рассмотрим следующий код для отображения и скрытия HTML элемента.

$("#panel").show(); $("#panel").hide();

При помощи приведённого кода элемент появляется и исчезает мгновенно. Пройдя по следующей ссылке, вы можете увидеть демонстрацию этого примера: http://jsfiddle.net/nimeshrmr/bMmFS/

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

• Растворение – реализует процесс постепенного растворения элемента HTML, изменяя его свойство opacity;
• Скольжение – реализует постепенное расширение/сжатие элемента HTML, изменяя его высоту.

Давайте посмотрим, как применять эти методы, чтобы отображать и скрывать элементы с эффектом анимации.
jQuery инкапсулирует сложность анимации, предоставляя встроенные методы для решения различных задач веб-дизайна.

Растворение

Растворение обычно реализуется с помощью функций fadeIn и fadeOut . Значение свойства opacity элемента увеличивается функцией fadeIn и уменьшается функцией fadeOut . Мы также можем передать временной интервал растворения, как показано в следующем примере:

$("#panel").fadeIn("slow"); $("#panel").fadeOut("fast");

У нас есть возможность выбрать предопределённые значения slow и fast в качестве интервала времени. Также мы можем передать число миллисекунд, чтобы определить длительность анимации. Вот ссылка с демонстрацией этого примера:
http://jsfiddle.net/nimeshrmr/zcRzL/

Скольжение

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

При этом slideUp используется для скрытия, а slideDown для отображения элементов. Следующий код показывает основной способ использования функций скольжения:

$("#panel").slideDown("slow"); $("#panel").slideUp("fast");

Параметр продолжительности также работает схожим с функциями растворения образом. Демонстрация использования функций скольжения приведена по следующей ссылке:
http://jsfiddle.net/nimeshrmr/nDz6J/

Приступаем к работе с функцией jQuery Animate

Большинство новичков думает, что разработка анимации довольно сложная задача. Определённо это сложно, если вы начинаете с чистого листа. jQuery инкапсулирует всю сложность, предоставляя единственную функцию, которая управляет всеми типами анимации.

В общем случае, анимация создаётся изменением значений атрибутов CSS. После того, как вы освоитесь с jQuery функцией animate , построение сложной анимации станет простой задачей. Давайте начнём с рассмотрения шаблона функции animate:

$("#panel").animate({ // Свойства и значения CSS }, 5000, "linear", function() { // Обработка завершения анимации });

Этот код иллюстрирует шаблон использования функции animate . Первый параметр содержит все свойства и значения CSS.

Следующий необязательный параметр определяет длительность анимации. Третий параметр определяет способ растягивания (тип анимации), а последний параметр определяет анонимную функцию, вызываемую при завершении анимации.

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

Анимация частей изображения

В этом разделе мы посмотрим на то, как можно отобразить изображение, применив анимацию к отдельным его частям. Сначала нам нужно разделить изображение на несколько маленьких. Вы можете использовать технику разделения изображений, представленную в этой статье: «Создание головоломки, используя jQuery и PHP ».

Вот изображение, которое мы будем использовать для анимации:

В исходных кодах к этой статье вы найдёте 12 изображений, получившихся после разделения. Каждое изображение будет иметь размеры 150 на 150 пикселей. Они разделены на два ряда по 6 штук. Все 6 изображений каждого ряда будут расположены в правом углу страницы, используя следующий код:

Здесь приведены 12 изображений, расположенных в два ряда при помощи двух классов CSS img_item и img_item2 . Теперь посмотрим на код CSS для позиционирования изображений:

Img_item{ position: absolute; right: 0px; opacity:0; top:0; } .img_item2{ position: absolute; right: 0px; opacity:0; top:150px; }

Согласно приведённому выше коду все изображения в каждом ряду будут скрыты и расположены поверх друг друга, используя абсолютное позиционирование. Теперь мы можем посмотреть на код jQuery для генерации изображения с помощью анимации:

$(document).ready(function(){ var left = 0; $(".img_item").each(function(i,val){ $(this).animate({ left: left, opacity: 1 }, 1500); left += 150; }); left = 0; $(".img_item2").each(function(i,val){ $(this).animate({ left: left, opacity: 1 }, 1500); left += 150; }); });

Итак, у нас есть два селектора для отбора элементов классов img_item и img_item2 . Затем мы применяем функцию animate к отдельным элементам, чтобы плавно изменить значение свойства opacity на 1, а свойство left изменяем относительно положения предыдущей части изображения. По сути, анимация будет применена ко всем частям изображения одновременно, и в результате получится нечто подобное:

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

Теперь вы знаете основы работы с функцией animate . Давайте глубже посмотрим на аспекты анимации, в частности на более детальные настройки.

Разработка последовательности эффектов

В предыдущем примере анимация применялась ко всем элементам сразу после загрузки страницы. Но иногда нам нужно применять эффекты последовательно, когда анимация каждого элемента начинается после завершения анимации предыдущего элемента. Итак, попробуем загрузить то же самое изображение, используя последовательность эффектов. Начнём с HTML кода:

Единственное отличие от предыдущей версии – использование одного класса CSS вместо двух классов для рядов. Эта реализация сгенерирует ряды, используя код jQuery, вместо их жёсткого кодирования с помощью CSS классов.

Код CSS для реализации этого примера будет таким же, как и в предыдущем случае. Теперь посмотрим на код jQuery для создания последовательности эффектов:

$(document).ready(function(){ var left = 0; var items = $(".img_item"); animateImg(items,0,0,0); });

После загрузки страницы мы выбираем все элементы изображения, используя класс img_item . Затем мы передаём эти элементы в функцию animateImg для создания анимации. Следующий код демонстрирует реализацию функции animateImg :

var indexNum = 1; var animateImg = function(items,left,height,indexNum){ if(items.length >= indexNum){ var item = items.get(indexNum); $(item).animate({ left: left, top: height, opacity: 1 }, 1500 ,function() { left += 150; indexNum++; if(indexNum % 6 == 0){ left = 0; height += 150; } animateImg(items,left,height,indexNum); }); } };

Функция animateImg использует четыре параметра. Первый параметр определяет коллекцию элементов изображения. Второй и третий параметры определяют значения свойств left и top для позиционирования на экране.

Изначально эти два значения устанавливаются в 0, чтобы расположить изображение в верхнем левом углу экрана. Четвёртый параметр – это порядковый номер изображения для разделения их по рядам.

Сначала мы проверяем, достигли ли конца массива элементов, с помощью условия if. Затем выбираем изображение из массива по заданному порядковому номеру.

После этого вызываем функцию animate длительностью 1500 миллисекунд. Наконец мы увеличиваем порядковый номер, чтобы выбрать следующий элемент из массива.

В этом примере у нас два ряда по 6 изображений в каждом. Поэтому мы используем деление по модулю порядкового номера, чтобы проверить, не достигли ли мы конца ряда. В этом случае мы увеличиваем значение top для следующего изображения, чтобы динамически создавать ряды.

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

Здесь вы найдёте демонстрацию предыдущего примера.

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

Цепочки эффектов

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