Unetway

jQuery - Выполнение анимации

Синтаксис

.animate(properties, [duration], [easing], [callback])
  • properties - список CSS-свойств, участвующих в анимации и их конечных значений
  • duration - продолжительность выполнения анимации в миллисекундах или строковым значением 'fast' или 'slow'.
  • easing - изменение скорости анимации (будет ли она замедляется к концу выполнения или наоборот ускорится)
  • callback - функция, которая будет вызвана после завершения анимации
.animate(properties, options)
  • properties - список CSS-свойств, участвующих в анимации и их конечных значений
  • options - дополнительные опции, в формате объекта:
    • duration - продолжительность выполнения анимации
    • easing - изменение скорости анимации
    • complete - функция, которая будет вызвана после завершения анимации
    • step - функция, которая будет вызвана после каждого шага анимации
    • queue - булево значение, указывающее, следует ли помещать текущую анимацию в очередь функций. При false, анимация будет запущена сразу же, не вставая в очередь
    • specialEasing - позволяет установить разные значения easing, для разных CSS-параметров

Описание

Метод .animate() выполняет заданную анимацию для указанных элементов.

Примеры

<!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">&raquo; Run</button>
<div id="block">Hello!</div>
 
<script>
// 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>
 
</body>
</html>