jQuery функция .animate()

Раздел: Эффекты jQuery

Описание: Выполняет пользовательскую анимацию в наборе свойств CSS.

.animate( свойства, [ продолжительность ], [ смягчение ], [ функция ])

Возможно анимировать любой элемент, например, простое изображение:

  1. Свойства: Карта свойств CSS, по которой анимация будет двигаться вперед.
  2. Продолжительность: Строка или число, определяющие, как долго анимация будет работать.
  3. Смягчение: Строка, указывающая какие функции смягчения будут использоваться при переходе.
  4. Функция вызываемая после завершения анимации.

Метод .animate() позволяет нам создавать анимационные эффекты на любые числовые свойства CSS. Единственный обязательный параметр это карта свойств CSS. Эта карта подобна той, которая может быть отправлена в метод css(), за исключением того, что список свойств более ограничен.

Все анимационные свойства должны быть числовыми (за исключением указанных ниже); свойства, которые не являются числовыми не могут быть анимированы с использованием базовых функций jQuery. (Например, width, height, или left могут быть анимированны, но background-color не может быть.) Значения свойства рассматриваются как количество пикселей если не указано иное. Единицы em и % могут быть указанны в соответствующих случаях.

В дополнение к числовым значениям, каждое свойство может принимать строки show, hide, и toggle. Эти ярлыки позволяют выполнять пользовательские скрытия и отображения анимации, которые учитывают тип отображения элемента. Анимированные свойства могут быть относительными. Если значение поставляется в последовательности символов += или -=, то целевой показатель вычисляется путем сложения или вычитания заданного числа от текущего значения свойства.

Смягчение

Начиная с версии jQuery 1.4, мы можем установить смягчение функций по свойствам в рамках одного вызова .animate(). В первой версии .animate(), каждое свойство может принять массив как собственное значение: первым членом массива является свойство CSS, вторым членом массива является функция смягчения. Если функция смягчения по свойствам не установлена для определенного свойства, она использует опционально значение метода .animate() аргумента смягчения. Если аргумент смягчения не определен, по умолчанию используется swing функции. Мы можем, например, одновременно оживить ширину и высоту с помощью функции смягчения swing и затемненность с помощью функции смягчения linear:

Продолжительность

Длительность дается в миллисекундах; более высокое число показывает более медленную анимацию, а не быструю. Выражения 'fast' и 'slow' соответствуют продолжительности в 200 и 600 миллисекунд, соответственно. Если другие выражения представлены или если параметр продолжительность опущен, используется продолжительность по умолчанию в 400 миллисекунд.

Функция обратного вызова

Если указанна, функция обратного вызова, то она вызывается после завершения анимации. Это может быть полезно для нанизывания различных анимаций вместе в определенной последовательности. В функцию обратного вызова не передается никаких аргументов, но this является элементом DOM, который анимируется. Если многочисленные элементы анимируются, важно отметить, что функция обратного вызова вызывается единожды для каждого соответствующего элемента, а не один раз в целом на анимацию.

Живые примеры:

Пример № 1

.animate( свойства, продолжительность )

html:
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>animate demo</title>
  <style>
  div {
    background-color: #bca;
    width: 100px;
    border: 1px solid green;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script >
</head>
<body>
 
<button id="go">» Run</button>
<div id="block">Hello!</div>
 
<script>
// Использование нескольких типов объектов в одной анимации..
 
$( "#go" ).click(function() {
  $( "#block" ).animate({
    width: "70%",
    opacity: 0.4,
    marginLeft: "0.6in",
    fontSize: "3em",
    borderWidth: "10px"
  }, 1500 );
});
</script >
 
</body>
</html>

Опции: width, opacity, marginLeft, fontSize, borderWidth

Анимируем блок

Пример № 2

.animate( свойства, продолжительность )

html:
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>animate demo</title>
  <style>
  div {
    position: absolute;
    background-color: #abc;
    left: 50px;
    width: 90px;
    height: 90px;
    margin: 5px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script >
</head>
<body>
 
<button id="left">«</button>
<button id="right">»</button>
<div class="block"></div>
 
<script>
$( "#right" ).click(function() {
  $( ".block" ).animate({ "left": "+=50px" }, "slow" );
});
 
$( "#left" ).click(function(){
  $( ".block" ).animate({ "left": "-=50px" }, "slow" );
});
</script >
 
</body>
</html>

Плавное смещение блока