jQuery метод .animate()

Определение и применение

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

jQuery синтаксис:

Синтаксис 1.0:

JavaScript

$( selector ).animate( { properties }, duration, easing, complete )

properties - PlainObject

duration - Number, или String

easing - String

complete - Function

JavaScript

$( selector ).animate( { properties }, { options } )

properties - PlainObject

options - PlainObject

Добавлен в версии jQuery

1.0

Значения параметров

Параметр	Описание
properties	Задает одну или несколько пар CSS свойство - значение, которые будут анимированы. Имена свойств должны быть написаны в нотации CamelCase. Анимированы могут быть только числовые значения. Помимо числовых значений, каждое свойство может принимать только следующие строковые значения: "hide" (пользовательское скрытие анимации). "show" (пользовательское отображение анимации). "toggle" (пользовательское скрытие, или отображение анимации). Значение анимированных свойств также могут быть относительными. Например, если значение указывается с `+=`, или `-=`, то значение элемента вычисляется путем сложения, или вычитания заданного числа от текущего значения элемента. Допускается использование с методом .animate() следующих свойств: `backgroundPositionX` (положение (позиция) фонового изображения по оси X). `backgroundPositionY` (положение (позиция) фонового изображения по оси Y). `borderWidth` (ширина границ элемента). `borderBottomWidth` (ширина нижней границы). `borderLeftWidth` (ширина левой границы). `borderRightWidth` (ширина правой границы). `borderTopWidth` (ширина верхней границы). `borderSpacing` (расстояние между границами соседних ячеек). `bottom` (определяет смещение позиционированного элемента относительно нижнего края). `fontSize` (размер шрифта элемента). `height` (высота элемента). `left` (определяет смещение позиционированного элемента относительно левого края). `letterSpacing` (увеличивает или уменьшает интервал между символами в тексте). `lineHeight` (междустрочный интервал). `margin` (внешние отступы со всех сторон элемента) `marginBottom` (внешние отступы с нижнего края элемента). `marginLeft` (внешние отступы с левого края элемента). `marginRight` (внешние отступы с правого края элемента). `marginTop` (внешние отступы с верхнего края элемента). `maxHeight` (максимальная высота элемента). `maxWidth` (максимальная ширина элемента). `minHeight` (минимальная высота элемента). `minWidth` (минимальная ширина элемента). `opacity` (прозрачность элемента). `outlineWidth` (ширина контура элемента). `padding` (внутренние отступы со всех сторон элемента). `paddingBottom` (внутренний отступ с нижней стороны элемента). `paddingLeft` (внутренний отступ с левой стороны элемента). `paddingRight` (внутренний отступ с правой стороны элемента). `paddingTop` (внутренний отступ с верхней стороны элемента). `right` (определяет смещение позиционированного элемента относительно правого края). `textIndent` (отступ первой строки в текстовом блоке). `top` (определяет смещение позиционированного элемента относительно верхнего края). `width` (ширина элемента). `wordSpacing` (увеличивает или уменьшает пробел между словами в тексте).
duration	Строковое или числовое значение, которое определяет, как долго анимация будет продолжаться. Значение по умолчанию 400 (в миллисекундах). Строковые ключевые слова 'fast' и 'slow' соответствуют 200 и 600 миллисекундам соответственно (высокие значения указывают на медленную анимацию, а более низкие на быструю).
easing	Ключевое слово (строка), которое опряеделяет кривую скорости для анимации (используется математическая функция - кубическая кривая Безье). Без использования внешних плагинов имеет только два значения - linear (эффект анимации с одинаковой скоростью от начала до конца) и swing (эффект анимации имеет медленный старт и медленное окончание, но скорость увеличивается в середине анимации). *Значение по умолчанию swing.*
complete	Функция, которая будет выполнена после завершения анимации, она вызывается один раз для каждого соответствующего элемента. Внутри функции, переменная `this` ссылается на DOM элемент к которому применяется анимация.
options	duration (по умолчанию: 400). Тип: `Number`, или `String`. Строковое или числовое значение, которое определяет, как долго анимация будет продолжаться (смотри выше). easing (по умолчанию: swing). Тип: `String`. Ключевое слово (строка), которое определяет кривую скорости для анимации (смотри выше). queue (по умолчанию: true). Тип: `Boolean`, или `String`. Логическое значение, которое указывает следует ли размещать анимацию в очереди эффектов. Если указано `false`, то анимация начнется сразу же. С версии jQuery 1.7 опция queue также может принимать строку, в этом случае анимация будет добавлена к очереди, представленной этой строкой. Когда используется пользовательское имя очереди анимации, то она не запускается автоматически, вы должны при этом использовать метод .dequeue( "`имя очереди`" ), чтобы запустить её. specialEasing. Тип: `PlainObject`. Объект, содержащий одно или несколько свойств CSS, определенных параметром свойства и соответствующие им функции замедления. Добавлено в версии 1.4. step. Тип: `Function`( Number now, Tween tween ). Функция вызывается для каждого анимируемого свойства каждого анимированного элемента. Эта функция дает возможность изменять Tween Object, чтобы изменить значение свойства, прежде чем оно будет установлено. progress. Тип: `Function`. Функция, которая будет вызываться после каждого шага анимации, только один раз для каждого анимированного элемента, независимо от количества анимированных свойств. Добавлено в версии 1.8. complete. Тип: `Function`. Функция (callback), которая будет выполнена после завершения анимации, она вызывается один раз для каждого соответствующего элемента (смотри выше). start. Тип: `Function` (Promise Object animation). Функция, вызывается, когда анимация элемента начинается. Добавлено в версии 1.8. done. Тип: `Function` (Promise Object animation, Boolean jumpedToEnd). Функция вызывается, когда анимация элемента завершается. Добавлено в версии 1.8. fail. Тип: `Function` (Promise Object animation, Boolean jumpedToEnd). Функция вызывается, когда анимацию элемента не удается завершить. Добавлено в версии 1.8. always. Тип: `Function` (Promise Object animation, Boolean jumpedToEnd). Функция вызывается, когда анимация элемента завершается или останавливается незавершенной. Добавлено в версии 1.8.

Пример использования

Пример использования jQuery метода .animate() (использование объекта со свойствами)

Нажмите ▶, затем выполните действие из пояснения. Измените JavaScript и запустите пример ещё раз. В редакторе используется jQuery 3.1.1.

index.html

HTML

<button class="start">Метод .animate()</button>

<div>Animate me</div>

main.js

JavaScript

$(document).ready(function () {
    $('.start').click(function () {
        $('div').animate({
            width: '90%',
            opacity: 0.5,
            height: '150px',
            fontSize: '2em',
            borderWidth: '5px',
        })
    })
})

style.css

CSS

div {
    width: 80px;
    height: 80px;
    border: 1px solid orangered;
    margin-top: 50px;
}

В этом примере с использованием jQuery метода .animate() мы при нажатии на кнопку с классом start выполняем анимацию основанную на изменении CSS свойств width (ширина элемента), opacity (прозрачность элемента), height (высота элемента), font-size (размер шрифта элемента) и border-width (ширина границ элемента) для выбранного элемента <div> в документе.

Обратите внимание на то, что мы передали методу только объект со свойствами, которые будут анимированы. Длительность анимации по умолчанию составляет 400 миллисекунд, а кривая скорости для анимации используется "swing" (эффект анимации имеет медленный старт и медленное окончание, но скорость увеличивается в середине анимации).

Рассмотрим следующий пример в котором зададим методу .animate() помимо свойств, которые подлежат анимации, значение для продолжительности анимации, укажем кривую скоростии и callback функцию:

Пример использования jQuery метода .animate() (продолжительность, скорость, callback)

index.html

HTML

<button class="start">Метод .animate()</button>

<div>Animate me</div>

main.js

JavaScript

$(document).ready(function () {
    $('.start').click(function () {
        $('div').animate(
            {
                width: '90%',
                opacity: 0.5,
                height: '150px',
                fontSize: '2em',
                borderWidth: '5px',
            },
            1500,
            'linear',
            function () {
                $(this).text('Thats all folks!').css('color', 'green')
            }
        )
    })
})

style.css

CSS

div {
    width: 80px;
    height: 80px;
    border: 1px solid violet;
    margin-top: 50px;
}

Кроме того, мы указали длительность анимации равную 1500 миллисекунд (1,5 секунды), использовали кривую скорости для анимации "linear" (эффект анимации с одинаковой скоростью от начала до конца) и указали callback функцию, которая запустится после завершения анимации. В это функции this ссылается на наш элемент <div>, которому мы с использованием метода .text() изменяем текстовое содержимое, а методом .css() устанавливаем зеленый цвет текста.

Рассмотрим следующий пример в котором зададим методу .animate() относительные значения, которые вычисляются путем сложения, или вычитания заданного числа от текущего значения элемента:

Пример использования jQuery метода .animate() (относительные значения)

index.html

HTML

<button class="left">Left</button>
<button class="right">Right</button>

<div>Animate me</div>

main.js

JavaScript

$(document).ready(function () {
    $('.left').click(function () {
        $('div').animate(
            {
                right: '+=50px',
                borderWidth: '-=2px',
            },
            'linear'
        )
    })
    $('.right').click(function () {
        $('div').animate(
            {
                right: '-=50px',
                borderWidth: '+=2px',
            },
            'linear'
        )
    })
})

style.css

CSS

div {
    width: 80px;
    height: 80px;
    border: 1px solid red;
    margin-top: 50px;
    position: absolute;
}

В этом примере с использованием jQuery метода .animate() мы при нажатии на определённую кнопку выполняем анимацию основанную на изменении CSS свойств right, которое отвечает за смещение элемента относительно правого края и свойства border-width (ширина границ элемента) для выбранного элемента <div> в документе.

При нажатии на кнопку (элемент <button>) с классом left элемент смещается относительного правого края окна браузера на 50 пикселей от его текущего значения (значение увеличивается и элемент смещается влево), ширина границ элемента при этом уменьшается на два пикселя. А при нажатии на кнопку (элемент <button>) с классом right происходит все тоже самое, но с точностью наоборот (значение смещения от правого края окна браузера уменьшается и элемент смещается вправо, а ширина границ элемента увеличивается на два пикселя).

Кроме того, мы указали кривую скорости для анимации "linear" - эффект анимации с одинаковой скоростью от начала до конца.

Рассмотрим следующий пример в котором зададим методу .animate() в качестве значений свойств, строковые значения (ключевые слова):

Пример использования jQuery метода .animate() (строковые значения)

index.html

HTML

<button class="start">Метод .animate()</button>
<div>Animate me</div>

main.js

JavaScript

$(document).ready(function () {
    $('.start').click(function () {
        $('div').animate(
            {
                width: ['toggle', 'swing'],
                height: ['toggle', 'swing'],
                opacity: 'toggle',
            },
            1500,
            'linear'
        )
    })
})

style.css

CSS

div {
    width: 150px;
    height: 150px;
    border: 1px solid blue;
    margin-top: 50px;
}

В этом примере с использованием jQuery метода .animate() мы при нажатии на кнопку с классом start выполняем анимацию основанную на изменении CSS свойств width (ширина элемента), height (высота элемента) и opacity (прозрачность элемента) для выбранного элемента <div> в документе.

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

Кроме того, для значений ширины и высоты мы явно указываем кривую скорости анимацим - "swing". Обратите внимание, что мы передали эти значения в массиве. Для свойство opacity (прозрачность элемента) будет использована скорость анимации "linear", так как мы указали его отдельным параметром метода .animate() и не указали явно как свойствам width и height. Кроме того, мы указали длительность анимации равную 1500 миллисекунд (1,5 секунды).

Рассмотрим следующий пример в котором передадим методу .animate() два объекта в качестве параметров, первый со свойствами, которые будут анимированы, а второй с опциями, которые будут контролировать эту анимацию:

Пример использования jQuery метода .animate() (объект со свойствами и опциями)

index.html

HTML

<button class="start">Метод .animate()</button>
<p class="status"></p>
<div>Animate me</div>

main.js

JavaScript

$(document).ready(function () {
    $('.start').click(function () {
        $('div').animate(
            {
                width: '90%',
                opacity: 0.5,
                height: '100px',
                fontSize: '2em',
                borderWidth: '5px',
            },
            {
                duration: 1500,
                easing: 'linear',
                complete: function () {
                    $('.status').text('Анимация завершена')
                },
                queue: false,
            }
        )
    })
})

style.css

CSS

div {
    width: 80px;
    height: 80px;
    border: 1px solid yellow;
    margin-top: 50px;
}

Обратите внимание на то, что во втором объекте, используемого в качестве параметра метода .animate(), мы передали опции, которые будут контролировать нашу анимацию:

продолжительность анимации равную 1500 миллисекунд (duration: 1500)
эффект анимации происходит с одинаковой скоростью от начала до конца (easing: linear)
функция, которая после завершения анимации находит элемент с классом status и добавляет текстовую информацию (complete: function).
анимация не размещается в очереди эффектов (queue: false).