Как вам, должно быть, известно, любые предметы не начинают двигаться мгновенно и с постоянной скоростью. К примеру, когда мы открываем ящик стола, то сначала ускоряем его движение, а на второй половине пути замедляем. Если что-то падает вниз, то оно сначала летит все быстрее и быстрее, а ударившись о поверхность - слегка подпрыгивает обратно. Эти, и другие перемещения поможет нам воспроизвести плагин jQuery Easing.
Для функционирования плагина необходимо подключить jQuery-фреймовор и сам плагин jQuery Easing:
<script src="jquery.js"></script>
<script src="jquery.easing.1.3.js"></script>
Чтобы указать тип анимации по умолчанию (jQuery использует метод анимации swing
) можно воспользоваться следующим кодом:
jQuery.easing.def = "метод анимации";
Для конкретного же элемента существуют два способа задать метод анимации: первый - компактный, второй - понятнее. Рассмотрим их на примере функции jQuery slideUp для тега div:
//1-й способ
$("div").slideUp({ms, method, callback});
//2-й способ
$("div").slideUp({
duration: ms,
easing: method,
complete: callback
});
Результат выполнения этих двух кодов будет один и тот же. Как вы должно быть уже догадались, duration
- это скорость анимации, значение в миллисекундах или slow/fast, easing
- метод анимации, callback
- пользовательская функция, вызываемая по завершению анимации.
Методы анимации в плагине jQuery Easing