jQuery Effects - Animation
Метод jQuery Animate() позволяет создавать пользовательские анимации.
анимация jQuery-метод Animate()
Метод jQuery Animate() используется для создания пользовательских анимаций.
Синтаксис:
$(selector).animate({params},speed,callback);
Обязательный параметр params определяет свойства CSS для анимации.
Дополнительный параметр Speed указывает длительность эффекта. Он может принимать следующие значения: "медленный", "быстрый" или миллисекунды.
Необязательный параметр обратного вызова — это функция, выполняемая после завершения анимации.
В следующем примере демонстрируется простое использование метода Animate(); Он перемещает элемент <div> вправо, пока не достигнет левого свойства 250пкс:
Пример
$("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(): вам нужно будет написать паддинглефт вместо отступа-Left, маргинригхт вместо поля справа и так далее.
Кроме того, цветовая анимация не включена в основную библиотеку jQuery.
Если вы хотите анимировать цвет, вам нужно скачать
Цвет анимации плагин от jQuery.com.
jQuery Animate() - использование относительных значений
Также можно определить относительные значения (значение затем относительно текущего значения элемента). Это делается путем ввода + = или-= перед значением:
Пример
$("button").click(function(){
$("div").animate({
left: '250px',
height: '+=150px',
width: '+=150px'
});
});
jQuery Animate() - использование предварительно определенных значений
Можно даже указать значение анимации свойства как «показать», «скрыть» или «переключить»:
Пример
$("button").click(function(){
$("div").animate({
height: 'toggle'
});
});
jQuery Animate() - использует функциональность очереди
По умолчанию jQuery поставляется с функциональностью очереди для анимаций.
Это означает, что если вы пишете несколько вызовов Animate() друг за другом, jQuery создает "внутреннюю" очередь с этими вызовами метода. Затем он запускает анимацию вызовов по одному.
Таким образом, если вы хотите выполнять различные анимации друг за другом, мы воспользуемся функциональностью Queue:
Пример 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
Для полного обзора всех эффектов jQuery, пожалуйста, перейдите на наш JQuery справка на эффект.
