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>

Похожие посты

Руководство по синтаксису в jQuery

Оператор jQuery обычно начинается со знака доллара ($) и заканчивается точкой с запятой (;). В jQuery знак доллара ($) — это просто псевдоним для jQuery. Давайте рассмотрим следующий пример кода, который демонстрирует синтаксис кода на jQuery. Приведенный выше пример просто отображает предупреждающее сообщение «Hello World!» пользователю. Объяснение кода Давайте разберем приведенный выше пример подробнее. Тег…

Руководство по callback-функциям в jQuery

Операторы JavaScript выполняются построчно. Но, поскольку для завершения эффекта jQuery требуется некоторое время, код следующей строки может выполняться, пока предыдущий эффект все еще выполняется. Чтобы этого не происходило, jQuery предоставляет функцию обратного вызова (Callback) для каждого метода. Функция обратного вызова — это функция, которая выполняется после завершения эффекта. Функция обратного вызова передается в качестве аргумента…

Руководство по удалению элементов и атрибутов в jQuery

jQuery предоставляет несколько методов, таких как empty(), remove(), unwrap()и т. д. для удаления существующих элементов HTML или содержимого из документа. jQuery-метод empty() jQuery-метод empty() удаляет из DOM все дочерние элементы, а также текстовое содержимое в выбранных элементах. Следующий пример удалит все содержимое внутри элементов с классом .container по нажатию кнопки. Согласно спецификации DOM W3C (World…

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.