Выполнение пользовательской анимации

.animate()

Выполняет заданную пользователем анимацию, с выбранными элементами. Анимация происходит за счет плавного изменения CSS-свойств у элементов. Функция имеет два варианта использования:

.animate(properties, [duration], [easing], [callback]):jQuery1.0

properties — список CSS-свойств, участвующих в анимации и их конечных значений. (см. описание ниже)
duration — продолжительность выполнения анимации. Может быть задана в миллисекундах или строковым значением 'fast' или 'slow' (200 и 600 миллисекунд).
easing — изменение скорости анимации (будет ли она замедляется к концу выполнения или наоборот ускорится). (см. описание ниже)
callback — функция, которая будет вызвана после завершения анимации.

.animate(properties, options):jQuery1.0

properties — список CSS-свойств, участвующих в анимации и их конечных значений. (см. описание ниже)
options — дополнительные опции. Должны быть представлены объектом, в формате опция:значение. Варианты опций:

duration — продолжительность выполнения анимации (см. выше).
easing — изменение скорости анимации (будет ли она замедляется к концу выполнения или наоборот ускориться). (см. описание ниже)
complete — функция, которая будет вызвана после завершения анимации.
step — функция, которая будет вызвана после каждого шага анимации.
queue — булево значение, указывающее, следует ли помещать текущую анимацию в очередь функций. В случае false, анимация будет запущена сразу же, не вставая в очередь.
specialEasing — позволяет установить разные значения easing, для разных CSS-параметров. Задается объектом, в формате параметр:значение. Опция была добавлена в jQuery 1.4.

Содержание

Выполнение нескольких анимаций

При одновременном вызове нескольких эффектов, применительно к одному элементу, их выполнение будет происходить не одновременно, а поочередно. Например при выполнении следующих команд:

  $("#my-div").animate({height: "hide"}, 1000);
  $("#my-div").animate({height: "show"}, 1000);

элемент с идентификатором my-div, в начале будет плавно исчезать с экрана, а затем начнет плавно появляться вновь. Однако, анимации, заданные на разных элементах, будут выполняться одновременно:

  $("#my-div-1").animate({height: "hide"}, 1000);
  $("#my-div-2").animate({height: "show"}, 1000);

Параметр properties

Задается объектом, в формате css-свойство:значение. Это очень похоже на задание группы параметров в методе .css(), однако, properties имеет более широкий диапазон типов значений. Они могут быть заданы не только в виде привычных единиц: чисел, пикселей, процентов и др., но еще и относительно: {height:"+=30", left:"-=40"} (увеличит высоту на 30 пикселей и сместит вправо на 40). Кроме того, можно задавать значения "hide", "show", "toggle", которые скроют, покажут или изменят видимость элемента на противоположную, за счет параметра, к которому они применены. Например

$('div').animate(
  {
    opacity: "hide",
    height: "hide"
  },
5000);

Скроет div-элементы, за счет уменьшения прозрачности и уменьшения высоты (сворачиванием) элемента.

Замечание 1: Отметим, что в параметре properties можно указывать только те css-свойства, которые задаются с помощью числовых значений. Например, свойство background-color использовать не следует.

Замечание 2: Величины, которые в css пишутся с использованием дефиса, должны быть указаны без него (не margin-left, а marginLeft).

Обработчик завершения анимации

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

Параметр easing

Этот параметр определяет динамику выполнения анимации — будет ли она проходить с замедлением, ускорением, равномерно или как то еще. Параметр easing задают с помощью функции. В стандартном jQuery доступны лишь две такие функции: 'linear' и 'swing' (для равномерной анимации и анимации с ускорением). По умолчанию, easing равняется 'swing'. Другие варианты можно найти в плагинах, например, jQuery UI предоставляет более 30 новых динамик.

Существует возможность задавать разные значения easing для разных css-свойств, при выполнении одной анимации. Для этого нужно воспользоваться вторым вариантом функции animate() и задать опцию specialEasing. Например:

$('#clickme').click(function() {
  $('#book').animate({
    opacity: 'toggle',
    height: 'toggle'
  }, {
    duration: 5000, 
    specialEasing: {
      opacity: 'linear',
      height: 'swing'
    }
  });
});

в этом случае изменение прозрачности будет происходить равномерно (linear), а высота будет изменяться с разгоном в начале и небольшим торможением в конце (swing).

В действии

При нажатии на кнопку, произведем некоторые манипуляции с элементом, используя метод animate:

~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~style~gt~
    div { 
      background-color:#bca; 
      width:100px; 
      border:1px solid green;
    }
  ~lt~/style~gt~
  ~lt~script src="https://code.jquery.com/jquery-latest.min.js"~gt~~lt~/script~gt~
~lt~/head~gt~
~lt~body~gt~
  ~lt~button id="go"~gt~» Съешь пирожок~lt~/button~gt~

  ~lt~div id="block"~gt~Алиса~lt~/div~gt~
  ~lt~script~gt~
    // Произведем изменение нескольких css-величин в ходе одной анимации.
    $("#go").click(function(){
      $("#block").animate({ 
        width: "70%",         // ширина станет 70%
        opacity: 0.4,         // прозрачность будет 40%
        marginLeft: "0.6in",  // отступ от левого края элемента станет равным 6 дюймам
        fontSize: "3em",      // размер шрифта увеличится в 3 раза
        borderWidth: "10px"   // толщина рамки станет 10 пикселей
      }, 1500);               // анимация будет происходить 1,5 секунды
    });
  ~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~

Ссылки

Поисковые ключи:
  • пользовательская анимация
  • выполнение анимации
  • анимация заданная пользователем
  • эффекты заданные пользователем
  • .animate()
  • animate()