jQuery метод .animate()

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

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>div {
width: 80px; /* ширина элемента */	
height: 80px; /* высота элемента */	
border: 1px solid orangered; /* сплошная граница размером 1 пиксель цвета orangered */	
margin-top: 50px; /* внешний отступ от верхнего края элемента */	
}
</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() (использование объекта со свойствами).

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

<!DOCTYPE html>
<html>
	<head>
		<title>Использование jQuery метода .animate() (продолжительность, скорость, callback)</title>
		<style>div {
width: 80px; /* ширина элемента */	
height: 80px; /* высота элемента */	
border: 1px solid violet; /* сплошная граница размером 1 пиксель цвета violet */	
margin-top: 50px; /* внешний отступ от верхнего края элемента */	
}
</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>

Кроме того, мы указали длительность анимации равную 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>div {
width: 80px; /* ширина элемента */	
height: 80px; /* высота элемента */	
border: 1px solid red; /* сплошная граница размером 1 пиксель красного цвета */	
margin-top: 50px; /* внешний отступ от верхнего края элемента */	
position: absolute; /* абсолютное позиционирование элемента */	
}
</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>div {
width: 80px; /* ширина элемента */	
height: 80px; /* высота элемента */	
border: 1px solid blue; /* сплошная граница размером 1 пиксель синего цвета */	
margin-top: 50px; /* внешний отступ от верхнего края элемента */	
}
</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>div {
width: 80px; /* ширина элемента */	
height: 80px; /* высота элемента */	
border: 1px solid yellow; /* сплошная граница размером 1 пиксель желтого цвета */	
margin-top: 50px; /* внешний отступ от верхнего края элемента */	
}
</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>

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

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

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

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

jQuery эффекты