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

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

Пример эффекта



jQuery

jQuery - метод animate()

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

Грамматика:

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

Обязателен params Параметр определяет CSS свойства, формирующие анимацию.

Опционально speed Параметр определяет продолжительность эффекта. Он может принимать следующие значения: "slow", "fast" или миллисекунды.

Опционально callback Параметр - это имя функции, которая будет выполнена после завершения анимации.

Ниже приведен пример простого применения метода animate(); он перемещает элемент <div> влево, до тех пор, пока свойство left равно 250 пикселям:

Пример

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

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

Совет:По умолчанию, все HTML элементы имеют статическое положение и их нельзя передвигать.

Если нужно управлять положением, запомните, что сначала нужно установить CSS-свойство position элемента в relative, fixed или absolute!

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

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

Пример

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

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

Совет:Можно ли использовать метод animate() для управления всеми CSS свойствами?

Да, почти можно! Но, нужно помнить одну важную вещь: когда используется animate(), все имена свойств должны быть написаны по camelCase, например, нужно использовать 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");
);

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

Пример 2

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

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

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