Эффекты jQuery — анимация
С помощью jQuery вы можете создавать собственные анимации.
Анимации jQuery — метод animate()
Метод jQuery animate()
используется для создания пользовательских анимаций.
Синтаксис:
$(selector).animate({params},speed,callback);
Обязательный параметр params определяет свойства CSS, которые необходимо анимировать.
Необязательный параметр скорости определяет продолжительность эффекта. Может принимать следующие значения: «медленно», «быстро» или миллисекунды.
Необязательный параметр обратного вызова — это функция, которая будет выполняться после завершения анимации.
Следующий пример демонстрирует простое использование animate()
метода; он перемещает элемент <div> вправо, пока не достигнет значения свойства left 250px:
Пример
$("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(): вам нужно будет написать 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");
});
В приведенном ниже примере сначала <div>
элемент перемещается вправо, а затем увеличивается размер шрифта текста:
Пример 2
$("button").click(function(){
var div = $("div");
div.animate({left: '100px'}, "slow");
div.animate({fontSize: '3em'}, "slow");
});
jQuery-упражнения
Справочник по эффектам jQuery
Полный обзор всех эффектов jQuery см. в нашем Справочнике по эффектам jQuery .