Пишем первые анимации.
3.1 jQuery анимация slideDown и slideUp
Всё как и во второй части, меняются только названия методов (функций):
$('#panel1').slideUp(1000).slideDown(1000);
$('#panel1').slideUp(1000).delay(1000).slideDown(1000); // добавляем задержку
Есть ли более простой вариант? Да! Многие функции имеют в своем арсенале toggle — функции, это функции которые работают в 2 стороны автоматически. Грубо говоря — если блок виден, мы скрываем с анимацией, если нет — показываем его.
$('#panel1').slideToggle(2000).slideToggle(2000);
3.2 jQuery toggle функции — slideToggle, fadeToggle, toggle
Рассмотрим несколько интересных функций, а что они делают опишем ниже:
$('#panel1').slideToggle(500); // slideUp \ slideOut
$('#panel1').fadeToggle(500); // fadeIn \ fadeOut
$('#panel1').toggle(500); // show \ hide
В комментариях указал функции аналоги, их мы рассмотрим чуть ниже.
slideToggle — мы уже разобрали, эта функция показывает \ прячет блок снизу-вверх и наоборот
fadeToggle — плавное пропадание во время анимации
toggle — меняет ширину и высоту во время анимации
3.3 jQuery fadeIn и fadeOut
Сразу к коду:
$('#panel1').fadeIn(500);
$('#panel1').fadeOut(500);
Плавное пропадание и появление. Используем, если по каким-то причинам нам не подходит fadeToggle.
