Учим jQuery — Часть 3

Пишем первые анимации.

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.

Читать далее Учим jQuery — Часть 4

автор: Dmitriy

Занимаюсь веб-разработкой с 2011 года. Посмотреть некоторые из моих работ, а также узнать чуть больше обо мне, вы можете на forwww.ru.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *