40% Анимация

Фреймворк jQuery позволяет очень легко анимировать DOM элементы, для этого предусмотрено несколько функций, но обо всём по порядку, начнём с простого hide() и show(), эти два метода соответственно скрывают либо отображают элементы:

// скроем все картинки $('img').hide();

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

Данные вызовы оперируют лишь CSS атрибутом display и переключают его из текущего состояния в none и обратно. В качестве первого параметра можно задать скорость анимации, для этого можно использовать одно из зарезервированных слов «slow» или «fast», либо же указывать скорость в миллисекундах (1000 мс = 1 сек):

//медленно спускаемся с горы и… скрываем все картинки

//slow == 600

//fast == 200

$('img').hide('slow');

// теперь вернём их на место, чуть быстрее $('img').show(400);

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

Теперь идём немножко дальше – вторым параметром в приведенных методах может быть callback-функция – она будет выполнена по окончанию анимации элементов:

// скрываем все картинки $('img').hide('slow', function(){

// опосля отображаем alert alert("Images was hidden");

});

Приведу иллюстрацию для наглядности процесса анимации:

51

Идём дальше – у нас на очереди набор методов slide – slideUp(), slideDown() и slideToggle(). Их поведение схоже с предыдущими функциями, но анимация будет затрагивать лишь высоту блоков – смотрим пример slide.html (ну и иллюстрации так же есть):

Рисунок 2 — анимация slideDown()

Прежде чем перейти к десерту упомяну семейство функций fade – они манипулируют лишь opacity:

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

53

А теперь самое сладкое – все эффекты анимации в jQuery крутятся вокруг метода animate. Данная функция берет один или несколько CSS-свойств элемента и изменяет их от исходного до заданного за N-ое количество итераций (количество итераций зависит от указанного времени, но не реже одной итерации в 13мс, если я правильно накопал это значение). Ну что-же, от слов к делу, попробуем реализовать функции fadeIn и fadeOut с помощью animate (см. пример animate.html):

// 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'

})

Поигрались и хватит, пора усложнить вам жизнь – у функции animate может быть более одного параметра, и пора приступить к их разбору. Набор параметров может быть разным, приведу первый, тот, что попроще:

54