Анимация в jQuery (hide, show, slideUp, slideDown, slideToggle, fadeOut, fadeIn, fadeToggle, fadeTo, animate)

Библиотеку jQuery часто выбирают благодаря методам, с помощью которых можно сделать анимацию для различных процессов на страницах сайта. В этой статье рассмотрим самые популярные из них для создания простейшей анимацию.

Простое скрытие (hide, show)

Порой появлется необходимость скрыть блок. Для этого пригодится метод hide, который устанавливает в стилях блока "display: none;". Приведём пример использования этого метода. Будем скрывать любой <div> блок при клике на него:

<div>Тише, мыши, кот на крыше</div>
<div>а котята ещё выше.</div>
<div>Кот пошёл за молоком,</div>
<div>а котята кувырком.</div>
<script>
   $('div').click(function() {
      $(this).hide();
   });
</script>

- если на странице с таким кодом кликнуть на любой <div> блок, то у него появится стиль style="display: none;", и он исчезнет со страницы. Попробуйте кликнуть на строчки в этом примере и они будут исчезать:

Тише, мыши, кот на крыше
а котята ещё выше.
Кот пошёл за молоком,
а котята кувырком.

Чтобы показать спрятанный блок необходимо использовать метод show. Очевидно, что нельзя кликнуть на элемент, который спрятан (то есть имеет свойство "display: none;"). Поэтому добавим кнопку для показа скрытых элементов к предыдущему примеру:

<div>Тише, мыши, кот на крыше</div>
<div>а котята ещё выше.</div>
<div>Кот пошёл за молоком,</div>
<div>а котята кувырком.</div>
<hr>
<b onclick="$('div').show();">Показать все строчки</b>
<script>
   $('div').click(function() {
      $(this).hide();
   });
</script>

Кликните по строчкам стиха и они спрячутся. Кликните по строке "Показать все строчки", и всё строчки снова видны.

Тише, мыши, кот на крыше
а котята ещё выше.
Кот пошёл за молоком,
а котята кувырком.
Показать все строчки

У методов hide и show есть параметр. В него можно передать количество миллисекунд (1000 миллисекунд = 1 секунда), за которое должно произойти скрытие/показ элемента. Перепишем предыдущий пример, вставив задержку на открытие в 1000 и закрытие в 2000. Но при этом добавим рамки элементов, чтобы понятно как именно происходит "закрытие":

<div>Тише, мыши, кот на крыше</div>
<div>а котята ещё выше.</div>
<div>Кот пошёл за молоком,</div>
<div>а котята кувырком.</div>
<hr>
<b onclick="$('div').show(1000);">Показать все строчки</b>
<script>
   $('div').click(function() {
      $(this).hide(2000);
   });
</script>

Попробуйте кликнуть на строчки и проследить как именно происходит закрытие и раскрытие:

Тише, мыши, кот на крыше
а котята ещё выше.
Кот пошёл за молоком,
а котята кувырком.
Показать все строчки

Бывают случаи, когда необходимо изменить состояние с "показан" на "спрятан", при этом не разбираясь в каком сейчас состоянии находится элемент. Для этого можно использовать метод .toggle(). Если элемент спрятан, то он будет показан, как будто на него был применён метод show, либо скрыт, как если бы на него применили метод hide.

Скрытие закатыванием вверх (slideUp, slideDown)

Как можно убедиться из предыдущего параграфа, при скрытии с помощью методов hide, show происходит уменьшение ширины и высоты блока до тех пор, пока он не исчезнет. Если методам hide, show не передано параметра, то это происходит моментально так, что никакой анимации и не видно - элемент просто исчезает. Но если необходимо сделать анимацию свертывания вверх, то необходимо использовать методы slideUp, slideDown. Перепишем предыдущий пример так, чтобы использовать эти методы

<div>Тише, мыши, кот на крыше</div>
<div>а котята ещё выше.</div>
<div>Кот пошёл за молоком,</div>
<div>а котята кувырком.</div>
<hr>
<b onclick="$('div').slideDown(1000);">Показать все строчки</b>
<script>
   $('div').click(function() {
      $(this).slideUp(2000);
   });
</script>

Метод slideDown показывает элемент, раскатывая сверху (увеличивая высоту элемента). Метод slideUp скрывает его, закатывая наверх (уменьшает высоту до тех пор, пока не установит в CSS свойства элемента "display: none;". Попробуйте эти методы на практике, кликните на строчки:

Тише, мыши, кот на крыше
а котята ещё выше.
Кот пошёл за молоком,
а котята кувырком.
Показать все строчки

Бывают случаи, когда необходимо изменить состояние с "показан" на "спрятан", при этом не разбираясь в каком сейчас состоянии находится элемент. Для этого можно использовать метод .slideToggle(). Если элемент спрятан, то он будет показан, как будто на него был применён метод slideDown, либо скрыт, как если бы на него применили метод slideUp.

Скрытие исчезновением (fadeOut, fadeIn)

Если все предыдущие методы скрытия работали через изменение высоты/ширины элементов до тех пор, пока не задавали CSS свойство "display: none;", то методы fadeOut и fadeIn убирают элемент изменяя его прозрачность (в CSS "opacity"). Если необходимо скрыть, то используется fadeOut, а fadeIn используется для появления.

Аналогично предыдущим методам, для fadeOut и fadeIn можно задать параметр в виде числа - это будет задержка в миллисекундах на исполнение процедуры скрытия. Перепишем предыдущий пример так, чтобы использовать эти методы

<div>Тише, мыши, кот на крыше</div>
<div>а котята ещё выше.</div>
<div>Кот пошёл за молоком,</div>
<div>а котята кувырком.</div>
<hr>
<b onclick="$('div').fadeIn(1000);">Показать все строчки</b>
<script>
   $('div').click(function() {
      $(this).fadeOut(2000);
   });
</script>

Метод slideDown показывает элемент, раскатывая сверху (увеличивая высоту элемента). Метод slideUp скрывает его, закатывая наверх (уменьшает высоту до тех пор, пока не установит в CSS свойства элемента "display: none;". Попробуйте эти методы на практике, кликните на строчки:

Тише, мыши, кот на крыше
а котята ещё выше.
Кот пошёл за молоком,
а котята кувырком.
Показать все строчки

Бывают случаи, когда необходимо изменить состояние с "показан" на "спрятан", при этом не разбираясь в каком сейчас состоянии находится элемент. Для этого можно использовать метод .fadeToggle(). Если элемент спрятан, то он будет показан, как будто на него был применён метод slideDown, либо скрыт, как если бы на него применили метод slideUp.

Своя анимация (animate)

Описанные ранее методы направлены только на скрытие и показ элементов, используя разные эффекты. Но если необходимо не скрывать элемент, а изменить его определённым образом, то на помощь прийдёт метод animate. Этому методу в первом параметре передаётся набор CSS свойств, которыми должен в конце анимации обладать элемент, а вторым параметром время в миллисекундах, за которое элемент должен быть преобразован.

Чтобы продемонстрировать работу метода придумаем задачу. К примеру, нам необходимо изменить размеры произвольного прямоугольника - нужно сделать из него квадрат высотой и шириной 100 пикселей. Для этого используем такой код:

<b onclick="$('div').animate({height: 100, width: 100}, 1000);">
   Сделать квадратом
</b>
<b onclick="$('div').animate({height: 50, width: 120}, 1000);">
   Сделать прямоугольником
</b>
<hr>
<div style="width: 150px; height: 30px;"></div>

Попробуйте кликнуть на текст "Сделать квадратом", а затем на текст "Сделать прямоугольником", проследив за тем, как меняются размеры элемента:

Сделать квадратом
Сделать прямоугольником

В первом параметре могут стоять CSS свойства не только определённых значений. К примеру, можно поставить height:'+=20'. Тогжа высота элемента будет увеличена на 20 пикселей относительно текущей. Модифицируем предыдущий пример, чтобы продемонстрировать это поведение:

<b onclick="$('div').animate({height: '+=20', width: '+=10'}, 1000);">
   Увеличить размер
</b>
<hr>
<div style="width: 70px; height: 50px;"></div>

Попробуйте кликнуть на текст "Увеличить размер". К ширине фигуры прибавится 10 пикселей, а к высоте 20 пикселей:

Увеличить размер