jQuery
Метод jQuery .animate ()
Поиск…
Синтаксис
- (Селектор) .animate ({стили}, {} варианты)
параметры
| параметр | подробности |
|---|---|
| свойства | Объект свойств и значений CSS, которые анимация будет двигаться в направлении |
| продолжительность | (по умолчанию: 400) Строка или номер, определяющий продолжительность выполнения анимации |
| ослабление | (по умолчанию: swing) Строка, указывающая, какую функцию ослабления использовать для перехода |
| полный | Функция для вызова после завершения анимации, которая вызывается один раз для каждого элемента. |
| Начните | определяет функцию, которая будет выполняться при начале анимации. |
| шаг | определяет функцию, которая будет выполняться для каждого шага анимации. |
| очередь | логическое значение, указывающее, следует ли разместить анимацию в очереди эффектов. |
| прогресс | определяет функцию, которая будет выполняться после каждого шага анимации. |
| сделанный | определяет функцию, которая будет выполняться при завершении анимации. |
| потерпеть поражение | задает функцию, которая будет выполнена, если анимация не завершится. |
| specialEasing | карту одного или нескольких свойств CSS из параметра styles и соответствующие им функции ослабления. |
| всегда | задает функцию, которая будет выполняться, если анимация прекратится без завершения. |
Анимация с обратным вызовом
Иногда нам нужно изменить положение слов из одного места в другое или уменьшить размер слов и автоматически изменить цвет слов, чтобы улучшить привлекательность нашего веб-сайта или веб-приложений. JQuery много помогает с этой концепцией, используя fadeIn(), hide(), slideDown() но ее функциональность ограничена, и она выполняет только конкретную задачу, которая ему присваивается.
Jquery исправляет эту проблему, предоставляя потрясающий и гибкий метод под названием .animate() . Этот метод позволяет настраивать пользовательские анимации, в которых используются свойства css, которые дают разрешение на пролет над границами. например, если мы дадим свойство стиля css как width:200; и текущая позиция элемента DOM равна 50, анимированный метод уменьшает текущее значение позиции из заданного значения css и анимирует этот элемент до 150. Но нам не нужно беспокоиться об этой части, потому что движок анимации будет обрабатывать его.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$("#btn1").click(function(){
$("#box").animate({width: "200px"});
});
</script>
<button id="btn1">Animate Width</button>
<div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;"></div>
Список свойств стиля css, которые разрешены в .animate() .
backgroundPositionX, backgroundPositionY, borderWidth, borderBottomWidth, borderLeftWidth, borderRightWidth, borderTopWidth, borderSpacing, margin, marginBottom, marginLeft, marginRight, marginTop, outlineWidth, padding, paddingBottom, paddingLeft, paddingRight, paddingTop, height, width, maxHeight, maxWidth, minHeight, minWidth, fontSize, bottom, left, right, top, letterSpacing, wordSpacing, lineHeight, textIndent,
Скорость указана в .animate() .
milliseconds (Ex: 100, 1000, 5000, etc.),
"slow",
"fast"
Ослабление, указанное в .animate() .
| «Качели» |
| «Линейная» |
Вот несколько примеров со сложными вариантами анимации.
Например, 1:
$( "#book" ).animate({
width: [ "toggle", "swing" ],
height: [ "toggle", "swing" ],
opacity: "toggle"
}, 5000, "linear", function() {
$( this ).after( "<div>Animation complete.</div>" );
});
Например, 2:
$("#box").animate({
height: "300px",
width: "300px"
}, {
duration: 5000,
easing: "linear",
complete: function(){
$(this).after("<p>Animation is complete!</p>");
}
});