Анимация в jQuery. Часть 2

Анимация в jQuery

От автора: приветствую вас, друзья. Итак, мы продолжаем изучение методов jQuery, позволяющих реализовать эффекты анимации. Сегодня мы рассмотрим несколько методов slide, а именно: slideUp, slideDown и slideToggle, работающих с высотой элемента.

Итак, первые два метода семейства slide, управляющие высотой элемента. Метод slideUp – позволяет свернуть элемент, т.е. сделать его высоту нулевой, по достижение которой элементу устанавливается свойство display: none. Второй метод – slideDown, наоборот, разворачивает элемент до прежней высоты. Приведем простейший пример:

<div class="container">
 <button class="btn btn-success" id="hide">Свернуть</button>
 <button class="btn btn-primary" id="show">Развернуть</button>
 <br><br>
 <div class="panel panel-default">
 <div class="panel-heading">Panel heading</div>
 <div class="panel-body">
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
eiusmod</p>
 </div>
 </div>
</div>

Анимация в jQuery

У нас есть пара кнопок, одна из которых будет сворачивать блок, а вторая разворачивать. А теперь пара строк на jQuery для реализации магии:

$(function(){
 $('#hide').click(function(){
  $('.panel-body').slideUp();
 });
 $('#show').click(function(){
  $('.panel-body').slideDown();
 });
});

Вот и все. Теперь клик по той или иной кнопке приведет к заявленному действию. Как и для методов hide / show, для методов slide можно передавать те же параметры: продолжительность анимации и функцию обратного вызова.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Вместо двух кнопок мы можем использовать одну, которая будет сворачивать элемент, если он развернут, и разворачивать, если он свернут. Здесь нам пригодится другой метод – slideToggle, который объединяет в себе два предыдущих метода семейства slide. уберем обе кнопки и заменим их одной:

<button class="btn btn-success" id="btn">Свернуть / Развернуть</button>

Анимация в jQuery

Соответственно, код jQuery также станет короче на один метод:

$(function(){
 $('#btn').click(function(){
  $('.panel-body').slideToggle();
 });
});

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

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Курс по jQuery: основы

Изучите jQuery с нуля до результата!

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree