Jquery одновременная анимация. Выполнение пользовательской анимации

15.05.2019

Анимация происходит за счет плавного изменения 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

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

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

Технологии улучшаются быстрыми темпами, чтобы удовлетворить потребности современного веб-дизайна. В результате 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 :

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

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

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

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

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

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

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

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

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

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