jQuery / Animation

// скроем все картинки
$(‘img’).hide();
// теперь вернём их на место
$(‘img’).show();

// медленно спускаемся с горы и… скрываем все картинки
// slow == 600
// fast == 200
$(‘img’).hide(‘slow’);
// теперь вернём их на место, чуть быстрее
$(‘img’).show(400);

В таком случае, исчезновение элементов будет сопровождаться анимацией атрибутов width, height, opacity и прочих. В довесок к этим двум методам есть еще метод toggle(), он работает как переключатель hide → show или show → hide.

// скрываем все картинки
$(‘img’).hide(‘slow’, function(){
// опосля отображаем alert
alert(“Images was hidden”);
});

метод slide – slideUp(), slideDown() и slideToggle(). Анимация будет затрагивать лишь высоту блоков.
метод fade – манипулирует лишь opacity

fadeIn(duration, callback) – изменяет opacity от 0 до предыдущего
fadeOut(duration, callback) – изменяет opacity от текущего до 0
fadeToggle(duration, callback) – переключатель между In и Out
fadeTo(duration, opacity, callback) – изменяет opacity до требуемого значения

// fadeOut()
$(‘article img’).animate({
‘opacity’:’hide’
})
// fadeIn()
$(‘article img’).animate({
‘opacity’:’show’
})

// значения указанных свойств будут плавно изменяться от текущих до заданных
$(‘article img’).animate({
‘opacity’:0.5,
‘height’:’50px’,
‘width’:’250px’
})

// изменяем, шаг за шагом
$(‘article img’).animate({
‘opacity’:’-=0.1′,
‘height’:’+=10px’
})

params – CSS свойства – с этим мы уже познакомились
duration – скорость анимации – тоже упоминалась ранее, указывается в миллисекундах, или используя ключевые слова “fast” или “slow”
easing – указываем какую функцию будем использовать для изменения значений
callback – функция, которая будет вызвана после окончания анимации

linear: function(p) { return p; },
swing: function(p) { return 0.5 – Math.cos( p*Math.PI ) / 2; }
p – коэффициент прохождения анимации, изменяется от 0 до 1

params – CSS свойства
options – тут целый набор возможностей, часть уже описывалась ранее:
duration – скорость анимации
easing – функция («linear» или «swing»)
complete – функция, которая будет вызвана после окончания анимации
step – функция, которая будет вызвана на каждом шаге анимации, о ней расскажу чуть ниже
queue – флаг/параметр очереди, чуть позже опишу подробнее
specialEasing – хэш в котором можно описать какую easing функцию следует использовать для изменения определённых параметров

Step-by-step
var customStep = function(now, obj) {
obj.elem; // объект анимации
obj.prop; // параметр, который анимируется
obj.start; // начальное значение
obj.end; // конечное значение
obj.pos; // коэффициент, изменяется от 0 до 1
obj.options; // опции настроек анимации
now; // текущее значение анимированного параметра, вычисляется как
// now = (obj.end – obj.start) * obj.pos
$(this).html(obj.prop +’: ‘+now+obj.unit); // вывод текста
}
$(“#box”).animate({height: “+=10px”}, {step:customStep});

Последовательное выполнение:
$(‘#box ‘)
// говорим что меняем
.animate({left:’+=100′})
// следующий вызов добавляется в очередь на выполнение
.animate({top:’+=100’})

Паралельное выполнение:
$(‘#box’)
// говорим что меняем
.animate({left:’+=100′})
// следующий вызов будет игнорировать очередь
.animate({top:’+=100′}, {queue:false})

Есть ещё чудесная функция stop(), которая позволяет остановить текущую анимацию на полпути, а так же почистить очередь при необходимости. Для обеспечения различного поведения функции, она принимает три параметра:
queue – имя очереди; для работы с дефолтной очередью анимации «fx» – опускаем
clearQueue – флаг очистки очереди
jumpToEnd – применить результат анимации али нет
// останавливаем выполнение текущей анимации
$(‘#box’).stop();
// останавливаем выполнение текущей анимации и всех последующих (чистим очередь)
$(‘#box’).stop(true);
// останавливаем выполнение текущей анимации и всех последующих но применяем результат текущей
$(‘#box’).stop(true, true);
// останавливаем выполнение только текущей анимации и применяем её результат
$(‘#box’).stop(false, true);

По умолчанию вся анимация над объектом складывается в очередь «fx», но с версии 1.7 можно указывать произвольную очередь:
$(‘#box’)
.animate({‘left’:’-=100′}, {queue:’x’}) // составляем очередь X
.dequeue(‘x’) // запускаем очередь X
$(‘#box’).stop(‘x’) // останавливаем анимацию в очереди X

Иногда требуется отключить всю анимацию (к примеру, для отладки) воспользуйтесь следующей конструкцией:
jQuery.fx.off = true;

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: