Метод animate() класса jQuery

Методы эффектов jQuery

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

Анимация позволяет создать анимацию перехода от одного CSS стиля к другому.

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

Кроме строк "show", "hide" и "toggle", строковые значения не могут быть установлены для анимации (например, цвет фона). Эти значения позволяют скрывать и отображать анимированные элементы.

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

Кроме стилистических свойств, анимацию можно выполнять для некоторых нестилистических свойств (например: scrollTop и scrollLeft).

Синтаксис 1:

$(selector).animate({styles},　duration,　easing,　callback)

Синтаксис 2:

$$(selector).animate($$styles$$, $$options$$)

Пример

Анимация элементов за счет изменения их ширины:

$("#btn1").click(function(){
　　$("div").animate({width: "500px"});
});

Анимация элементов за счет изменения их ширины и высоты:

$("#btn1").click(function(){
　　$("div").animate({width: "500px"});
　　$("div").animate({height: "400px"});
});

Анимация элементов с помощью передачи нескольких стилистических свойств и значений:

$("#btn1").click(function(){
　　$("div").animate({
　　　　　width:"500px",
　　　　　height:"400px"
　　});
});

Использование animate()ofduration и easingofПараметры:

$("button").click(function(){
　　$("div").animate({width: "500px", height: "400px"}, 4000, ",linear");
});

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

$("button").click(function(){
　　$("div").animate({
　　　　width:"500px",
　　　　height:"400px"
　　}, 500, ",linear",
　　function(){
　　　　$(this).after("<h2>Анимация завершена</h2>");
　　});
});

Использование альтернативной синтаксис для指定 нескольких анимаций {styles} и {options}:

$("button").click(function(){
　　$("div").animate({
　　　　width:"500px",
　　　　height:"400px"
　　}, {
　　　　duration:500,
　　　　easing: ",linear",
　　　　complete:function(){
　　　　　　$(this).after("<h2>Анимация завершена</h2>");
　　　　}
　　});
});

Добавить плавное прокрутка при прокрутке страницы пользователем:

let　size　=　$(".main").height();　//　Получить высоту “.main”
$(window).keydown(function(event)　{
　　if(event.which　===　40)　{　//　Если нажата клавиша вниз
　　　　$("html,　body").animate({scrollTop:　"+="　+　size},　300);
　　}　else　if(event.which　===　38)　{　//　Если нажата клавиша вверх
　　　　$("html,　body").animate({scrollTop:　"-="　+　size},　300);
　　}
});

Использовать относительные значения для анимации всех абзацев:

$("p").click(function(){
　　$(this).animate({
　　　　fontSize:　"+=5px",
　　　　padding　:　"+=10px"
　　});
});

Кроме того, мы можем даже указать анимационное значение свойства “show”, “hide” или “toggle”:

$("button").click(function(){
　　$("div").animate({height:　"toggle"});
});

Параметр значения(Грамматика 1)

$(selector).animate({styles},　duration,　easing,　callback)

Параметр значения($$Грамматика 2$$)

$$(selector).animate($$styles$$, $$options$$)

Методы эффектов jQuery