40% Анимация

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

hide()	скроем элементы
show()	отобразим элементы

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

// медленно спускаемся с горы и… скрываем все картинки
//   slow == 600
//   fast == 200
$("img").hide('slow')

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

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

// запустите пару раз
$("img").toggle()

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

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

Пример анимации с использованием методов Hide/Show/Toggle

---

Анимацию таких атрибутов как height, width и opacity видно невооруженным взглядом, в действительности же это далеко не всё. Заглянув внутрь jQuery, можно увидеть, что также изменяются внутренние и внешние отступы – padding и margin – так что не стоит об этом забывать.

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

slideUp()	скроем элементы изменяя высоту до 0
slideDown()	отобразим все элементы, постепенно увеличивая высоту элементов с нуля
slideToggle()	работает как slideDown() для скрытых элементов, иначе как slideUp()

Пример анимации с использованием методов семейства Slide

---

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

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

Пример анимации с использованием методов "fadeIn/Out/To/Toggle"

---

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

// fadeOut()
$("img").animate({
    "opacity": "hide"
})

// fadeIn()
$("img").animate({
    "opacity": "show"
})

Всё просто ведь. Давайте-ка теперь усложним задачу – изменим размер блоков и прозрачность:

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

Как видите, тоже несложно. Теперь попробуем отталкиваться от текущих значений, а не задавать необходимые:

// изменяем, шаг за шагом
$("img").animate({
    "opacity": "+=0.1",
    "height": "+=12px",
    "width": "+=20px"
})

Пример анимации с методом animate()