jQuery эффекты - анимация

jQuery позволяет нам создавать пользовательские анимации.

jQuery анимация - метод animate()

jQuery animate()метод выполняет пользовательскую анимацию для группы CSS-атрибутов.

Этоanimate()Синтаксис метода:

$(selector).animate({styles}, duration, easing, callback)

Параметры:

• {styles} - указывает на объект CSS-атрибутов и значений, к которым будет перемещаться анимация

• длительность - определяет, сколько времени будет длиться анимация. Возможные значения: "slow", "fast" или миллисекунды

• easing - указывает на функцию сглаживания, используемую для перехода. Возможные значения: "swing", "linear"

• callback-Указать функцию, которую нужно вызвать после выполнения метода animate()

Пример анимации элемента, изменяя его ширину:

$("button").click(function(){
　　$("div").animate({width: "500px"});
});

Пример, показывающий, как анимировать элемент, изменяя его положение:

$("button").click(function(){
　　$("div").animate({left: "500px"});
});

jQuery animate() - установка нескольких свойств

Мы можем также анимировать несколько свойств одного элемента одновременно.

$("button").click(function(){
　　$("div").анимировать({
　　　　ширина: "500px",
　　　　высота: "400px",
　　　　прозрачность: 0.3,
　　　　левый: "50px"
　　});
});

Следующий пример использует animate() для демонстрациидлительностьиeasingПараметры:

$("button").click(function(){
　　$("div").анимировать({
　　　　ширина: "500px",
　　　　высота: "400px"
　　}, 4000, "linear");
});

Следующий пример использует animate() для демонстрацииКаллбэкПараметры:

$("button").click(function(){
　　$("div").анимировать({
　　　　ширина: "500px",
　　　　высота: "400px"
　　}, 500, "linear",
　　function(){
　　　　$(this).after("<h2>Анимация завершена</h2>");
　　});
});

jQuery animate() - использование очереди анимации

По умолчанию jQuery имеет функцию очереди анимации.

В очереди ожидает выполнения одна или несколько функций.

Это означает, что если вы пишете несколько вызовов animate() подряд, jQuery создает "внутреннюю" очередь. Затем он выполняет вызовы анимации по одному.

В следующем примере сначала изменяется ширина элемента DIV, затем высота, а затем увеличивается размер шрифта текста:

$("button").click(function(){
　　let div = $("div");
　　div.анимировать({ширина: "500px"});
　　div.анимировать({высота: "200px"});
　　div.анимировать({размер_шрифта: "10em"});
});

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

$("button").click(function(){
　　$("div")
　　　　.анимировать({ширина: "500px"})
　　　　.анимировать({высота: "200px"})
　　　　.анимировать({размер_шрифта: "10em"})
　　　　.animate({opacity: 0.3});
});

Более подробную информацию о ссылках вы узнаете в более поздней части этого учебника.

jQuery animate()-использование относительных значений

Свойства анимации также могут быть относительными. Если для значения предоставлена префиксная последовательность += или -=, то целевое значение вычисляется, добавляя или вычитая из текущего значения свойства заданное количество.

$("p").click(function(){
　　$("this").animate({
　　　　fontSize: "+=5px",
　　　　padding : "+=10px"
　　});
});

jQuery animate()-использование предопределенных значений

Кроме того, мы можем даже определить анимационное значение свойства "show", "hide" или "toggle":

$("button").click(function(){
　　$("div").animate({height: "toggle"});
});

Референтное руководство по эффектам jQuery

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