jQuery метод .animate()

jQuery эффекты

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

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

jQuery синтаксис:

Синтаксис 1.0:

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

properties - PlainObject 
duration - Number, или String
easing - String
complete - Function

$( 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.

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

<!DOCTYPE html>
<html>
	<head>
		<title>Использование jQuery метода .animate() (использование объекта со свойствами)</title>
		<style></style>		
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$( document ).ready(function(){
	  $( ".start" ).click(function(){ // задаем функцию при нажатиии на элемент с классом start
	    $( "div" ).animate({
	      width: "90%", // ширина элемента
	      opacity: 0.5, // прозрачность элемента
	      height: "150px", // высота элемента
	      fontSize: "2em", // размер шрифта элемента
	      borderWidth: "5px" // ширина границ элемента
	    });
	  });
	});
		</script>
	</head>
	<body>
		<button class = "start">Метод .animate()</button>
		<div>Animate me</div>
	</body>
</html>

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

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

Результат нашего примера:

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

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

<!DOCTYPE html>
<html>
	<head>
		<title>Использование jQuery метода .animate() (продолжительность, скорость, callback)</title>
		<style></style>		
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$( document ).ready(function(){
	  $( ".start" ).click(function(){ // задаем функцию при нажатиии на элемент с классом start
	    $( "div" ).animate({
	      width: "90%", // ширина элемента
	      opacity: 0.5, // прозрачность элемента
	      height: "150px", // высота элемента
	      fontSize: "2em", // размер шрифта элемента
	      borderWidth: "5px" // ширина границ элемента
	    }, 1500, "linear", function(){
	      $( this ).text("Thats all folks!").css("color", "green");	// изменяем текстовое содержимое нашему блоку и указываем цвет текста
	    });
	  });
	});
		</script>
	</head>
	<body>
		<button class = "start">Метод .animate()</button>
		<div>Animate me</div>
	</body>
</html>

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

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

Результат нашего примера:

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

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

<!DOCTYPE html>
<html>
	<head>
		<title>Использование jQuery метода .animate() (относительные значения)</title>
		<style></style>		
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$( document ).ready(function(){
	  $( ".left" ).click(function(){ // задаем функцию при нажатиии на элемент с классом left
	    $( "div" ).animate({
	      right: "+=50px", // смещение позиционированного элемента от правого края (увеличение текущего значения на 50)
	      borderWidth: "-=2px" // уменьшение ширины границы элемента на два пикселя от текущего значения
	      }, "linear"); // скорость анимации
	  });
	  $( ".right" ).click(function(){ // задаем функцию при нажатиии на элемент с классом right
	    $( "div" ).animate({
	      right: "-=50px", // смещение позиционированного элемента от правого края (уменьшение текущего значения на 50)
	      borderWidth: "+=2px" // увеличение ширины границы элемента на два пикселя от текущего значения
	      }, "linear"); // скорость анимации
	  });  
	});
		</script>
	</head>
	<body>
		<button class = "left">Left</button>
		<button class = "right">Right</button>
		<div>Animate me</div>
	</body>
</html>

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

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

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

Результат нашего примера:

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

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

<!DOCTYPE html>
<html>
	<head>
		<title>Использование jQuery метода .animate() (строковые значения)</title>
		<style></style>		
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$( document ).ready(function(){
	  $( ".start" ).click(function(){ // задаем функцию при нажатиии на элемент с классом start
	    $( "div" ).animate({
	      width: [ "toggle", "swing" ], // ширина элемента
	      height: [ "toggle", "swing" ], // высота элемента
	      opacity: "toggle" // прозрачность элемента
	    }, 1500, "linear"); // продолжительность и скорость анимации
	  });
	});
		</script>
	</head>
	<body>
		<button class = "start">Метод .animate()</button>
		<div>Animate me</div>
	</body>
</html>

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

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

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

Результат нашего примера:

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

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

<!DOCTYPE html>
<html>
	<head>
		<title>Использование jQuery метода .animate() (объект со свойствами и опциями)</title>
		<style></style>		
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$( document ).ready(function(){
	  $( ".start" ).click(function(){ // задаем функцию при нажатиии на элемент с классом start
	    $( "div" ).animate({
	      width: "90%", // ширина элемента
	      opacity: 0.5, // прозрачность элемента
	      height: "150px", // высота элемента
	      fontSize: "2em", // размер шрифта элемента
	      borderWidth: "5px" // ширина границ элемента
	    }, {
	      duration: 1500, // продолжительность анимации
	      easing: "linear", // скорость анимации
	      complete: function(){ // callback
	        $(".status").text("Анимация завершена");
	      },
	      queue: false // не ставим в очередь
	    });
	  });
	});
		</script>
	</head>
	<body>
		<button class = "start">Метод .animate()</button>
		<p class = "status">Метод .animate()</p>
		<div>Animate me</div>
	</body>
</html>

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

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

Результат нашего примера:

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