30 lines
1.4 KiB
Markdown
30 lines
1.4 KiB
Markdown
|
---
|
|||
|
|
title: jQuery Animate
|
|||
|
|
localeTitle: jQuery Анимация
|
|||
|
|
---
|
|||
|
|
## jQuery Анимация
|
|||
|
|
|
|||
|
|
Метод анимации jQuery позволяет легко создавать простые анимации, используя только несколько строк кода. Основная структура следующая:
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
$(".selector").animate(properties, duration, callbackFunction());
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Для аргумента `properties` вам нужно передать объект javascript, с помощью свойств CSS, которые вы хотите оживить как ключи, и значения, которые вы хотите оживить как значения. В течение `duration` вам нужно ввести количество времени в миллисекундах, которое должна выполнить анимация. Функция `callbackFunction()` выполняется после завершения анимации.
|
|||
|
|
|
|||
|
|
### пример
|
|||
|
|
|
|||
|
|
Простой пример будет выглядеть так:
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
$(".awesome-animation").animate({
|
|||
|
|
opacity: 1,
|
|||
|
|
bottom: += 15
|
|||
|
|
}, 1000, function() {
|
|||
|
|
$(".different-element").hide();
|
|||
|
|
});
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
#### Дополнительная информация:
|
|||
|
|
|
|||
|
|
Для получения дополнительной информации посетите [официальный сайт](http://api.jquery.com/animate/)
|