Последние учебники веб-разработки
 

jQuery Эффекты - Анимация

❮ Предыдущая Следующая Глава ❯

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



Jquery

Jquery анимация - animate() Метод

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

Синтаксис:

$(selector).animate({params},speed,callback);

Обязательный параметр PARAMS определяет свойства CSS, чтобы быть анимированными.

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

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

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

пример

$("button").click(function(){
    $("div").animate({left: '250px'});
}); 
Попробуй сам "

По умолчанию все элементы HTML имеют статическое положение, и не могут быть перемещены.
Для того, чтобы манипулировать позицию, не забудьте сначала установить позицию CSS свойство элемента по 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.

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");
}); 
Попробуй сам "

Проверьте себя с упражнениями!

Упражнение 1 » Упражнение 2» Упражнение 3 » Упражнение 4»

JQuery эффекты Ссылка

Полный обзор всех эффектов JQuery, пожалуйста , перейдите на наш JQuery Effect Reference .


❮ Предыдущая Следующая Глава ❯