Скорость анимации jquery. Базовые эффекты

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

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

Пример использования методов 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 путем изменения его высоты.

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

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

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

Применим animate() и передвинем маленький квадрат из одной стороны к другой:

jQuery

Анимируется только свойство left . Продолжительность анимации - заранее заданное значение slow (600мс). Внутренний