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

animate(params, options)

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

option - набор опций для конфигурации анимации:
duration - скорость в мс, либо одна из предустановленных - ”slow”, “normal”, или “fast”. default: "normal"
easing - имя easing - эффекта, который вы хотите использовать (работает только при подключенном плагине Easing Plugin). default: "swing"
complete - функция, которая будет вызвана по окончании анимации. Выполняется единожды для каждого элемента.
queue - в случае false дает возможность выполнить анимационный эффект немедленно, вне очереди, параллельно со следующим эффектом. default: true

Пример: по клику на кнопке "Первый" или "Второй" запускаем анимацию соответствующего блока. У обоих блоков анимация идентична, разница только в том, что у первого мы добавили queue:false, вследствии чего анимационные эффекты выполняются параллельно, а у второго анимация выполняется в порядке своей очередности:

//HTML/CSS<style>
.example_j{border:solid 1px #999; width:50px; height:50px; background:red; margin:5px}
</style>
<div class="example_j"></div>
<div class="example_j"></div>
<button>Первый</button><button>Второй</button>//jQuery$(document).ready(function (){
$(".example_j ~ button:first").click(function(){
$(".example_j:first").animate({marginLeft: "+=250px"}, {queue:false, duration:3000}).animate({width:"150px"}, 1500)
});
$(".example_j ~ button:last").click(function(){
$(".example_j:last").animate({marginLeft: "+=250px"}, 3000).animate({width:"150px"}, 1500)
});
});

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