Руководство по методу animate() в jQuery

jQuery-метод animate() используется для создания пользовательских анимаций. Метод animate() обычно используется для анимации числовых CSS-свойств, таких как width, height, margin, padding, opacity, top, left и т. д., Но нечисловые свойства, такие как color или background-color нельзя анимировать с помощью базовой функциональности jQuery.

Не все CSS-свойства являются анимируемыми. Как правило, любое CSS-свойство, которое принимает значения в виде чисел, длин, процентов или цветов, является анимируемым. Однако цветовая анимация не поддерживается базовой библиотекой jQuery. Для управления и анимации цвета используйте jQuery color plugin.

Синтаксис

Базовый синтаксис метода animate() выглядит следующим образом:

$(selector).animate({ properties }, duration, callback);

Параметры метода animate() имеют следующие значения:

Обязательный параметр properties определяет CSS-свойства для анимации.
Необязательный параметр duration указывает продолжительность анимации. Длительности могут быть указаны либо с использованием одной из предопределенных строк 'slow' или'fast', либо в количестве миллисекунд; более высокие значения указывают на более медленную анимацию.
Необязательный параметр callback-функции, которая вызывается после завершения анимации.

Вот простой пример метода animate(), который анимирует изображение от его исходного положения вправо на 300 пикселей при нажатии кнопки.

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("img").animate({
            left: 300
        });
    });
});
</script>

Все HTML-элементы по умолчанию имеют позицию static. Поскольку статический элемент не может быть перемещен, вы должны установить CSS-свойство position для элемента на relative, fixed или absolute, чтобы манипулировать или анимировать его положение.

Одновременная анимация нескольких свойств

Вы также можете анимировать несколько свойств элемента одновременно, используя метод animate(). Все свойства анимируются одновременно без каких-либо задержек.

<script>
$(document).ready(function(){
    $("button").click(function(){
        $(".box").animate({
            width: "300px",
            height: "300px",
            marginLeft: "150px",
            borderWidth: "10px",
            opacity: 0.5
        });
    });
});
</script>

Имена CSS-свойств должны быть набраны верблюжьим шрифтом при использовании с метода animate(), например если вы хотите анимировать размер шрифта, вам нужно написать 'fontSize', а не 'font-size'. Аналогично, напишите 'marginLeft' вместо 'margin-left', 'borderWidth' вместо 'border-width' и т. д.

Вы должны установить свойство border-style для элемента до анимацией его свойства border-width. Элемент должен иметь границы, прежде чем вы сможете анимировать ширину границы, потому что значением свойства border-style по умолчанию является none.

Однократная анимация свойств или анимация в очереди

Вы также можете анимировать несколько свойств элемента по отдельности в очереди, используя функцию сцепления (chaining) jQuery. Мы узнаем больше о цепочке в следующей главе.

В следующем примере демонстрируется анимация jQuery с очередями или цепочками, где каждая анимация начинается после завершения предыдущей анимации элемента.

<script>
$(document).ready(function(){
    $("button").click(function(){
        $(".box")
            .animate({width: "300px"})
            .animate({height: "300px"})
            .animate({marginLeft: "150px"})
            .animate({borderWidth: "10px"})
            .animate({opacity: 0.5});
    });
});
</script>

Свойства анимации с относительными значениями

Вы также можете определить относительные значения для анимированных свойств. Если значение указывается с начальным префиксом += или -=, то целевое значение рассчитывается путем сложения или вычитания заданного числа из текущего значения свойства.

<script>
$(document).ready(function(){
    $("button").click(function(){
        $(".box").animate({            
            top: "+=50px",
            left: "+=50px",
            width: "+=50px",
            height: "+=50px"
        });
    });
});
</script>

Свойства анимации с предопределенными значениями

В дополнение к числовым значениям каждое свойство может принимать строки 'show', 'hide', и 'toggle'. Это будет очень полезно в ситуации, когда вы просто хотите анимировать свойство от его текущего значения к начальному и наоборот.

<script>
$(document).ready(function(){
    $("button").click(function(){
        $(".box").animate({
            width: 'toggle'
        });
    });
});
</script>