Анимация элементов

При помощи jQuery можно создавать пользовательскую анимацию элементов.



jQuery

jQuery метод animate()

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

Синтаксис:


$(селектор).animate({params},speed,callback);

Обязательный параметр params определяет анимируемые (изменяемые) свойства CSS.

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

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

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


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

Внимание! По умолчанию у всех HTML элементов свойство position имеет значение static, и они не могут быть сдвинуты. Чтобы можно было изменять позицию элемента, сначала нужно установить его CSS свойству position значение relative, fixed или absolute!

Изменение нескольких свойств

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.

Использование относительных значений

Метод animate() также допускает использование относительных значений (значение применяется относительно текущего значения элемента). Делается это при помощи конструкции += или -=, размещенной перед значением:


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

Использование предопределенных значений

Кроме этого в методе animate() значение свойства анимации можно определяет как "show", "hide" или "toggle":


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

Использование функциональной последовательности

По умолчанию для анимации 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");
});