Анимация jQuery
jQuery метод animate() позволяет Вам создавать пользовательские анимации.
Анимации jQuery - Метод animate()
jQuery метод animate() используется, чтобы создавать пользовательские анимации.
Синтаксис:
Необходимый параметр params определяет свойства CSS, которые будут анимированы.
Дополнительный параметр скорости определяет продолжительность эффекта. Это может принять следующие значения: "slow", "fast" или миллисекунды.
Дополнительный параметр обратного вызова - функция, которая будет выполняться после того, как анимация завершается.
Следующий пример демонстрирует простое использование метода animate(); он перемещает <div> элемент налево, пока он не достигает свойства left, равного 250px:
По умолчанию все элементы HTML имеют статическую позицию, и не могут быть перемещены.
Чтобы управлять позицией, не забудьте сначала установить CSS свойство position элемента в relative, fixed или absolute!
Анимация jQuery - Управление Несколькими Свойствами
Заметьте, что многократные свойства могут быть анимированы одновременно:
Пример
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
Попробуйте сами »
Действительно ли возможно управлять ВСЕМИ свойствами CSS с помощью метода animate()?
Да, почти! Однако, есть одна важная вещь, которую следует помнить: все имена свойств должны быть указаны в стиле регистра верблюда при использовании с методом animate(): Вы должны будете писать paddingLeft вместо padding-left, marginRight вместо margin-right и так далее.
Кроме того, цветная анимация не включается в ядро библиотеки jQuery.
Если Вы хотите анимировать цвет, Вы должны загрузить Плагин Цветной Анимации с jQuery.com.
Анимация jQuery() - Использование Относительных значений
Также можно определять относительные значения (значения относительно текущего значения элемента). Это делается, помещая += или -= перед значением:
Пример
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
Попробуйте сами »
Анимация jQuery() - Использование Предопределенных Значений
Можно даже определить значение свойства анимации как "show", "hide" или "toggle":
Анимация jQuery - Использование Функциональности Очереди
По умолчанию jQuery идет с функциональностью очереди для анимаций.
Это означает, что, если Вы пишете многократные вызовы animate() друг после друга, jQuery создает "внутреннюю" очередь с этими вызовами метода. Затем она выполняет анимационные вызовы ОДИН ЗА ДРУГИМ.
Так, если Вы хотите выполнить различные анимации друг за другом, можно использовать в своих интересах функциональность очереди:
Пример 1
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
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});
Попробуйте сами »