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

jQuery animate() Method

<Методы Jquery Эффект

пример

"Оживлять" элемент, изменяя его высоту:

$("button").click(function(){
    $("#box").animate({height: "300px"});
});
Попробуй сам "

Определение и использование

animate() метод выполняет пользовательскую анимацию набора свойств CSS.

Этот метод изменяет элемент из одного состояния в другое со стилями CSS. Значение CSS свойство изменяется постепенно, чтобы создать анимированный эффект.

Только числовые значения могут быть анимированы (например , "margin:30px" ). Строковые значения не могут быть анимированы (например , "background-color:red" ), за исключением строк "show", "hide" и "toggle" . Эти значения позволяют скрываться и показывать анимированный элемент.

Совет: Используйте "+=" "-=" "+=" "-=" Для относительной анимации.

Синтаксис

(selector).animate({styles},speed,easing,callback)

параметр Описание
styles Необходимые. Задает один или несколько CSS свойства / значения для анимации.

Примечание: Имена свойств должны быть верблюжьей обсаженной при совместном использовании с animate() метод: Вам нужно будет написать paddingLeft вместо набивка налево, marginRight вместо Маржа направо, и так далее.

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


Только числовые значения могут быть анимированы (например , "margin:30px" ). Строковые значения не могут быть анимированы (например , "background-color:red" ), за исключением строк "show", "hide" и "toggle" . Эти значения позволяют скрываться и показывать анимированный элемент.

Совет: Цвет анимации не включены в основной Jquery библиотеке.Если вы хотите , чтобы оживить цвет, вам необходимо скачать плагин Color Animations от jQuery.com
speed Необязательный. Определяет скорость анимации. Значение по умолчанию составляет 400 миллисекунд

Возможные значения:

  • миллисекунды (например, 100, 1000, 5000, и т.д.)
  • "slow"
  • "fast"
easing Необязательный. Определяет скорость элемента в разных точках анимации. Значение по умолчанию "swing" . Возможные значения:
  • "swing" - движется медленнее в начале / конце, но быстрее в середине
  • "linear" - движется с постоянной скоростью
Совет: Более ослабление функции доступны во внешних плагинов.
callback Необязательный. Функция, которая будет выполнена после того, как анимация завершается. Чтобы узнать больше о обратный вызов, пожалуйста , прочитайте нашу Jquery Callback главу

Альтернативный Синтаксис

(selector).animate({styles},{options})

параметр Описание
styles Необходимые. Задает один или несколько CSS свойств / значения для анимации (см возможные значения выше)
options Необязательный. Задает дополнительные опции для анимации. Возможные значения:
  • duration - устанавливает скорость анимации
  • easing - указывает функции замедления
  • complete - определяет функцию , которая будет выполнена после того, как анимация завершается
  • step - определяет функцию , которая будет выполняться для каждого шага в анимации
  • progress - определяет функцию , которая будет выполняться после каждого шага в анимации
  • queue - это логическое значение , указывающее , следует ли поместить анимацию в очереди эффектов
  • specialEasing - отображение одного или нескольких свойств CSS от > параметр стилей, и их соответствующие функции замедления
  • start - определяет функцию , которая будет выполняться , когда начинается анимация
  • done - определяет функцию , которая будет выполнена , когда анимация закончилась
  • fail - определяет функцию , которая будет выполнена , если анимация не была завершена
  • always - определяет функцию , которая будет выполнена , если анимация останавливается , не завершив

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

Используя animate() с функцией обратного вызова
Как пользоваться animate() с функцией обратного вызова , который повторяет анимацию.

Альтернативный Синтаксис Пример
Используя альтернативный синтаксис, чтобы задать несколько стилей анимации и опций.

Использование animate() , чтобы создать индикатор прогресса
Как использовать animate() метод , чтобы создать индикатор прогресса.

Добавить плавную прокрутку на страницу якорей
Как пользоваться animate() , чтобы добавить плавный скроллинг к ссылкам.

<Методы Jquery Эффект