Анимация jQuery

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

jQuery

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

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

Синтаксис:

$(селектор).animate({params}скорость,обратный_вызов);

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

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

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

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

Пример

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

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

По умолчанию все элементы HTML имеют статическую позицию, и не могут быть перемещены.

Чтобы управлять позицией, не забудьте сначала установить CSS свойство position элемента в relative, fixed или absolute!

Анимация jQuery - Управление Несколькими Свойствами

Заметьте, что многократные свойства могут быть анимированы одновременно:

Пример

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

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

Действительно ли возможно управлять ВСЕМИ свойствами CSS с помощью метода animate()?
Да, почти! Однако, есть одна важная вещь, которую следует помнить: все имена свойств должны быть указаны в стиле регистра верблюда при использовании с методом animate(): Вы должны будете писать paddingLeft вместо padding-left, marginRight вместо margin-right и так далее.
Кроме того, цветная анимация не включается в ядро библиотеки jQuery.
Если Вы хотите анимировать цвет, Вы должны загрузить Плагин Цветной Анимации с jQuery.com.

Анимация jQuery() - Использование Относительных значений

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

Пример

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

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

Анимация jQuery() - Использование Предопределенных Значений

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

Пример

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

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

Анимация jQuery - Использование Функциональности Очереди

По умолчанию 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 - Удаление Элементов

Смотрите также

Комментарии

Написать