продолжительность: Строка или число, определяющие, как долго анимация будет работать.
смягчение: Строка, указывающая какие функции смягчения будут использоваться при переходе.
завершение: Функция вызываемая после завершения анимации.
step: Функция, которая вызывается после каждого шага анимации.
queue: Логическое значение, указывающее на место анимации в очереди эффектов. Если false, анимация начнется немедленно.
особоеСмягчение: Карта с одним или несколькими свойствами CSS, определенными свойствами аргумента и их соответствующими функциями смягчения (добавленно в версию 1.4).

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

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

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

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

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

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

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

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

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

<div id="clickme">
  Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123" 
  style="position: relative; left: 10px;" />

Мы можем оживить непрозрачность, левое смещение и высоту изображения одновременно:

$('#clickme').click(function() {
  $('#book').animate({
    opacity: 0.25,
    left: '+=50',
    height: 'toggle'
  }, 5000, function() {
    // Animation complete.
  });
});

Обратите внимание, что мы обозначили toggle как целевое значение свойства height. Так как изображение было видно раньше, анимация уменьшает высоту к 0, чтобы скрыть его. Второе нажатие меняет переход в обратную сторону:

Непрозрачность изображения установленна на значение цели, таким образом это свойство не будет анимированно на второе нажатие. Так как мы указали целевое значение для left, как относительную величину, изображение движется еще дальше направо во время второй анимации.

Атрибут position элемента не должен быть static если мы хотим анимировать свойство left как мы сделали это в примере.

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

Смягчение

Оставшийся параметр .animate() является строкой имен смягчения функции использования. Функция смягчения определяет скорость, с которой анимация прогрессирует в различных точках. Применение смягчения по умолчанию в библиотеке jQuery называется swing, и прогрессирование в постоянном темпе называется linear. Дополнительные функции смягчения доступны с помощью плагинов, в первую очередь комплект jQuery UI.

Смягчение по свойствам

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

Мы можем, например, одновременно оживить ширину и высоту с помощью функции смягчения swing и затемненность с помощью функции смягчения linear:

$('#clickme').click(function() {
  $('#book').animate({
    width: ['toggle', 'swing'],
    height: ['toggle', 'swing'],
    opacity: 'toggle'
  }, 5000, 'linear', function() {
      $(this).after('<div>Animation complete.</div>');
  });
});

Во второй версии .animate(), опции карты могут включать атрибут specialEasing, который сам является картой атрибутов CSS и соответствующие функции смягчения. Мы можем одновременно оживить ширину с помощью linear функции смягчения и высоту с помощью easeOutBounce функции смягчения.

$('#clickme').click(function() {
  $('#book').animate({
    width: 'toggle',
    height: 'toggle'
  }, {
    duration: 5000, 
    specialEasing: {
      width: 'linear',
      height: 'easeOutBounce'
    }, 
    complete: function() {
      $(this).after('<div>Animation complete.</div>');
    }
  });
});

Как отмечалось ранее, плагин необходим для функции easeOutBounce.

Дополнительные примечания:

Все эффекты jQuery, включая .animate(), могут быть выключенны глобально с помощью установки jQuery.fx.off = true. Для подробной информации, смотрите jQuery.fx.off.

Примеры

Пример 1

Нажмите на кнопку для запуска анимации элемента div с набором различных свойств.

    // Using multiple unit types within one animation.
    $("#go").click(function(){
      $("#block").animate({ 
        width: "70%",
        opacity: 0.4,
        marginLeft: "0.6in",
        fontSize: "3em", 
        borderWidth: "10px"
      }, 1500 );
    });

Результат выполнения кода выше:

Попробуйте сами

Пример 1 - Полный код:

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>  
  <script>
  $(document).ready(function(){
    // Using multiple unit types within one animation.
    $("#go").click(function(){
      $("#block").animate({ 
        width: "70%",
        opacity: 0.4,
        marginLeft: "0.6in",
        fontSize: "3em", 
        borderWidth: "10px"
      }, 1500 );
    });
  });
  </script>
  <style>
  div { 
    background-color:#bca; 
    width:100px; 
    border:1px solid green;
  }
  </style>
</head>
<body>
  <button id="go">» Run</button>
  <div id="block">Hello!</div>
</body>
</html>

Попробуйте сами

Пример 2

Пример «относительной» анимации. При нажатии на кнопки элементы div двигаются в соответствующие стороны.

    $("#right").click(function(){
      $(".block").animate({"left": "+=50px"}, "slow");
    });

    $("#left").click(function(){
      $(".block").animate({"left": "-=50px"}, "slow");
    });

Результат выполнения кода выше:

Попробуйте сами

Пример 2 - Полный код:

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>  
  <script>
  $(document).ready(function(){
    $("#right").click(function(){
      $(".block").animate({"left": "+=50px"}, "slow");
    });
    $("#left").click(function(){
      $(".block").animate({"left": "-=50px"}, "slow");
    });
  });
  </script>
  <style>
  div { 
    position:absolute; 
    background-color:#abc; 
    left:50px;
    width:90px; 
    height:90px;
    margin:5px; 
  }
  </style>
</head>
<body>
  <button id="left">«</button> <button id="right">»</button>
<div class="block"></div>
</body>
</html>

Попробуйте сами

Пример 3

Анимация представляет собой переключение свойств высоты и видимости всех параграфов, длительность анимации — 600 миллисекунд.

$("p").animate({
      "height": "toggle", "opacity": "toggle"
    }, "slow");

Пример 4

Анимация представляет собой установка свойства left в 50 и свойства opacity в 1 (полностью видимый), длительность анимации — 500 миллисекунд.

$("p").animate({
      "left": "50", "opacity": 1
    }, 500);

Пример 5

Пример использования функции ослабления для получения иного стиля анимации. Данный метод будет работать только при наличии соответствующего дополнения.

$("p").animate({
      "opacity": "show"
    }, "slow", "easein");

Пример 6

Первая кнопка показывает пример параллельной анимации. Происходит расширение элемента div до 90% от возможной ширины и при этом увеличивается текст. Как только оканчивается увеличение текста, начинается заливка кусочка границы.

Вторая кнопка показывает традиционную анимацию с наличием очереди эффектов, где каждый следующий эффект начинается после окончания предыдущего.

    $("#go1").click(function(){
  $("#block1").animate( { width:"90%" }, { queue:false, duration:3000 } )
         .animate( { fontSize:"24px" }, 1500 )
         .animate( { borderRightWidth:"15px" }, 1500);
    });
    $("#go2").click(function(){
      $("#block2").animate( { width:"90%"}, 1000 )
         .animate( { fontSize:"24px" } , 1000 )
         .animate( { borderLeftWidth:"15px" }, 1000);
    });
    $("#go3").click(function(){
      $("#go1").add("#go2").click();
    });
    $("#go4").click(function(){
      $("div").css({width:"", fontSize:"", borderWidth:""});
    });

Результат выполнения кода выше:

Попробуйте сами

Пример 6 - Полный код:

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script> 
  <script type="text/javascript" language="javascript">
  $(document).ready(function(){
    $("#go1").click(function(){
  $("#block1").animate( { width:"90%" }, { queue:false, duration:3000 } )
         .animate( { fontSize:"24px" }, 1500 )
         .animate( { borderRightWidth:"15px" }, 1500);
    });
    $("#go2").click(function(){
      $("#block2").animate( { width:"90%"}, 1000 )
         .animate( { fontSize:"24px" } , 1000 )
         .animate( { borderLeftWidth:"15px" }, 1000);
    });
    $("#go3").click(function(){
      $("#go1").add("#go2").click();
    });
    $("#go4").click(function(){
      $("div").css({width:"", fontSize:"", borderWidth:""});
    });
  });
  </script>
  <style>div { 
    background-color:#bca; 
    width:200px;
    height:1.1em;
    text-align:center;
    border:2px solid green;
    margin:3px;
    font-size:14px;
  }
  button {
    font-size:14px;
  }
  </style>
</head>
<body>
  <button id="go1">» Animate Block1</button>
  <button id="go2">» Animate Block2</button>
  <button id="go3">» Animate Both</button>
  <button id="go4">» Reset</button>
  <div id="block1">Block1</div>
  <div id="block2">Block2</div>
</body>
</html>

Попробуйте сами

Пример 7

$("p").animate({
      "height": "toggle", "opacity": "toggle"
    }, { duration: "slow" });

Пример 8

Анимация представляет собой установка свойства left в 50 и свойства opacity в 1 (полностью видимый), длительность анимации — 500 миллисекунд. В данном примере анимация без очереди эффектов, т.е. эффекты выполняются параллельно.

$("p").animate({
      left: "50px", opacity: 1
    }, { duration: 500, queue: false });

Пример 9

$("p").animate({
      "opacity": "show"
    }, { "duration": "slow", "easing": "easein" });

Пример 10

Пример использования функции. Первым аргументом является массив CSS свойств, вторым — продолжительность анимации, третим — тип ослабления и четвертым — безымянная функция.

$("p").animate({
       height:200, width:400, opacity: .5
    }, 1000, "linear", function(){alert("all done");} );

Была ли эта информация полезной?

Да Нет

animate()

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

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

.animate( свойства, опции )

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

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

Смягчение

Смягчение по свойствам

Дополнительные примечания:

Примеры

Пример 1

Пример 1 - Полный код:

Пример 2

Пример 2 - Полный код:

Пример 3

Пример 4

Пример 5

Пример 6

Пример 6 - Полный код:

Пример 7

Пример 8

Пример 9

Пример 10

Комментарии