jQuery эффект - метод animate()

Референс-мануал по эффектам jQuery

Пример

Изменить высоту элемента "div":

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

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

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

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

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

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

Комментарий:Используйте "+=" или "-=" для создания относительных анимаций (relative animations).

Синтаксис 1

$().animate(styles,speed,easing,callback)
Параметры Описание
styles

Обязателен. Определяет CSS стили и значения, создающие анимационный эффект.

Возможные значения CSS стиля (приведены примеры):

Комментарий:CSS-стили используют DOM-имена (например, "fontSize") для установки, а не CSS-имена (например, "font-size").
speed

Опционально. Определяет скорость анимации. По умолчанию "normal".

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

  • миллисекунды (например, 1500)
  • "slow"
  • "normal"
  • "fast"
easing

Опционально. Определяет функцию easing для установки скорости анимации в различных точках анимации.

Внутренние функции easing:

  • swing
  • linear

расширение плагинов предоставляет дополнительные функции easing.
callback

Опционально. Функция, которая будет выполняться после выполнения функции animate.

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

Грамматика 2

$().animate(styles,options)
Параметры Описание
styles Обязателен. Определяет CSS-стили и значения, используемые для создания эффектов анимации (как указано выше).
options

Опционально. Определяет дополнительные параметры анимации.

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

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

Референс-мануал по эффектам jQuery