jQuery animate()Метод

jQuery 效果方法Методы эффектов jQuery

Примеры

Примените анимацию к элементу, изменив его высоту:

$("button").click(function(){ $("#box").animate({height:"300px"}); });

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

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

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

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

Анимировать можно только числовые значения (например, "margin:30px"). Строковые значения анимировать нельзя (например, "background-color:red").

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

Синтаксис

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

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

Примечание:При использовании с методом animate() имена свойств должны быть записаны в camelCase: Необходимо использовать paddingLeft вместо padding-left, marginRight вместо margin-right и так далее.

Анимируемые свойства:

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

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

  • Миллисекунды
  • "slow"
  • "fast"
easing Необязательно. Задаёт скорость элемента в разных точках анимации. Значение по умолчанию — "swing".

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

  • "swing" — движется медленно в начале/конце, быстрее в середине
  • "linear" — движется с постоянной скоростью
Совет:Дополнительные функции плавности доступны в плагинах-расширениях.
callback Необязательно. Функция, которая выполняется после завершения функции animate.

Чтобы узнать больше о callback, посетите нашуjQuery Callbackэту главу.

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

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

Параметр Описание
styles Обязательно. Задаёт одно или несколько CSS-свойств/значений для анимации (как выше).
options Необязательно. Задаёт дополнительные параметры для анимации.

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

  • speed — задаёт скорость анимации
  • easing - задаёт используемую функцию сглаживания
  • callback - задаёт функцию, выполняемую после завершения анимации
  • step - задаёт функцию, выполняемую после завершения каждого шага анимации
  • queue - Boolean. Указывает, помещать ли анимацию в очередь эффектов. Если false, анимация начнётся немедленно.
  • specialEasing - изstylesсопоставление одного или нескольких CSS-свойств из параметров и соответствующих им функций сглаживания.

实例

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

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

jQuery 效果方法Методы эффектов jQuery

Другие расширения