DeeDi - трезвые записки

animate(params, [duration], [easing], [func])

Функция предназначена для создания пользовательской анимации.
params - набор атрибутов CSS, которые вы хотите использовать в анимации, и их конечные значения. Этот агрумент является ключевым и может состоять из одной или нескольких пар {атрибут : значение}. В случае нескольких пар - {атрибут1 : значение1, атрибут2 : значение2, ... , атрибутN : значениеN}. Здесь атрибут - CSS свойство, которое мы требуется анимировать (height, top, opacity и т.д.), значение - конечное значение css-свойства к которому мы должны прийти. Значение показывает конец процесса анимирования свойства. Поддерживаются только свойства, имеющие в качестве значения какие-либо числа (или же значения “hide”, “show” и “toggle”). Например, backgroundColor не поддерживается. Значение может быть указано в em и % (там где это возможно). Также можно указывать значениеотносительно текущей позиции - “+=” или “-=” для перемещения элемента. Еще одна важная особенность - атрибуты типа margin-left, font-size и т.д. должны быть записаны в виде marginLeft, fontSize.
Пример1: по клику на на кнопке запускаем анимацию, которая установит ширину рамки 3px, ширину блока 200px, прозрачность 0.5, и слева увеличит отступ на 50px:

HTML/CSS<style>
#example_j1 {border:solid 1px #999; width:50px; height:50px; background:red;}
</style>
<div id="example_j1"></div>
<button>Пуск</button>//jQuery$(document).ready(function (){
$("#example_j1 + button").click(function(){
$("#example_j1").animate({
borderWidth: "3px",
width: "200px",
opacity: 0.5,
marginLeft: "+=50px"
}, 2000)
});
});

В примере выше продолжительность анимации задана в 2000 мс. Для установки собственной продолжительности существует необязательный аргумент duration. Скорость задается в мс (как в примере), либо одним из режимов скорости - "slow", "normal", или "fast"
Также в примере по окончании анимации мы запустили функцию, которая всталяет в наш элемент текст. Это есть необязательный аргумент [func].

Осталось только упомянуть [easing] - также необязательный аргумент, это имя easing - эффекта. Имеет два встроенных значения "linear" и "swing". Работает только при подключенном плагине Easing Plugin (расширяет возможности анимации).

Боковой текст: