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

Дата публикации: 2016-12-20

Анимация в 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>

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

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

<div class="panel-heading">Panel heading</div>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do

eiusmod</p>

</div>

Анимация в jQuery

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

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

$(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>

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

Анимация в jQuery

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

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

$(function(){

$('#btn').click(function(){

$('.panel-body').slideToggle();

});

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

Метки: jquery