Page 51 - jQuery для начинающих
P. 51
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
www.trk.kg
