Эффекты jQuery — анимация


С помощью jQuery вы можете создавать собственные анимации.



jQuery

Анимации jQuery — метод animate()

Метод jQuery animate()используется для создания пользовательских анимаций.

Синтаксис:

$(selector).animate({params},speed,callback);

Обязательный параметр params определяет свойства CSS, которые необходимо анимировать.

Необязательный параметр скорости определяет продолжительность эффекта. Может принимать следующие значения: «медленно», «быстро» или миллисекунды.

Необязательный параметр обратного вызова — это функция, которая будет выполняться после завершения анимации.

Следующий пример демонстрирует простое использование animate()метода; он перемещает элемент <div> вправо, пока не достигнет значения свойства left 250px:

Пример

$("button").click(function(){
  $("div").animate({left: '250px'});
}); 

По умолчанию все элементы HTML имеют статическое положение и не могут быть перемещены.
Чтобы манипулировать позицией, не забудьте сначала установить для свойства CSS position элемента значение относительное, фиксированное или абсолютное!



jQuery animate() — Управление несколькими свойствами

Обратите внимание, что одновременно можно анимировать несколько свойств:

Пример

$("button").click(function(){
  $("div").animate({
    left: '250px',
    opacity: '0.5',
    height: '150px',
    width: '150px'
  });
}); 

Можно ли манипулировать ВСЕМИ свойствами CSS с помощью метода animate()?

Да почти! Однако следует помнить одну важную вещь: все имена свойств должны быть написаны в верблюжьем регистре при использовании с методом animate(): вам нужно будет написать paddingLeft вместо padding-left, marginRight вместо margin-right и так далее.

Кроме того, цветная анимация не включена в основную библиотеку jQuery.
Если вы хотите анимировать цвет, вам необходимо загрузить плагин Color Animations с сайта jQuery.com.


jQuery animate() — использование относительных значений

Также возможно определить относительные значения (тогда значение будет относиться к текущему значению элемента). Это делается путем добавления += или -= перед значением:

Пример

$("button").click(function(){
  $("div").animate({
    left: '250px',
    height: '+=150px',
    width: '+=150px'
  });
}); 

jQuery animate() — использование предопределенных значений

Вы даже можете указать значение анимации свойства как " show", " hide" или " toggle":

Пример

$("button").click(function(){
  $("div").animate({
    height: 'toggle'
  });
}); 

jQuery animate() — использует функциональность очереди

По умолчанию jQuery поставляется с функцией очереди для анимации.

Это означает, что если вы пишете несколько animate()вызовов друг за другом, jQuery создает «внутреннюю» очередь с этими вызовами методов. Затем он запускает анимационные вызовы ОДИН за ОДНИМ.

Итак, если вы хотите выполнять разные анимации друг за другом, воспользуемся функционалом очереди:

Пример 1

$("button").click(function(){
  var div = $("div");
  div.animate({height: '300px', opacity: '0.4'}, "slow");
  div.animate({width: '300px', opacity: '0.8'}, "slow");
  div.animate({height: '100px', opacity: '0.4'}, "slow");
  div.animate({width: '100px', opacity: '0.8'}, "slow");
}); 

В приведенном ниже примере сначала <div>элемент перемещается вправо, а затем увеличивается размер шрифта текста:

Пример 2

$("button").click(function(){
  var div = $("div");
  div.animate({left: '100px'}, "slow");
  div.animate({fontSize: '3em'}, "slow");
}); 

jQuery-упражнения

Проверьте себя с помощью упражнений

Упражнение:

Используйте этот animate()метод для перемещения элемента <div> на 250 пикселей вправо.

$("div").animate({: ''});


Справочник по эффектам jQuery

Полный обзор всех эффектов jQuery см. в нашем Справочнике по эффектам jQuery .