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

Анимация в jQuery

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

Итак, методы группы fade анимируют элемент за счет его свойства непрозрачности (opacity), т.е. для исчезновения элемента значение свойства opacity плавно изменяется от 1 до 0. При достижении нуля свойство display элемента становится none. И, наоборот, для плавного появления элемента значение изменяется от 0 до 1.

Синтаксис использования методов fade аналогичен уже изученным нами методам hide, show и методам группы slide. Давайте возьмем пример из предыдущего урока и заменим методы slideUp и slideDown методами fadeOut и fadeIn соответственно.

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

Мы использовали лишь другой набор методов, ничего больше в коде не изменили, остальной код остался прежним. При этом мы получили другой тип анимации. Вместо сворачивания и разворачивания элемента, теперь он плавно растворяется и проявляется. Довольно симпатичный эффект.

Как и в случае с методами slide, в fade есть также метод, сочетающий в себе обе функции – появление и растворение – это метод fadeToggle, который покажет элемент, если он скрыт, и скроет его, если он показывается.

<button class="btn btn-success" id="btn">Скрыть / Показать</button>
$(function(){
	$('#btn').click(function(){
		$('.panel-body').fadeToggle();
	});
});

И последний метод, с которым мы познакомимся, — метод fadeTo. Данный метод позволяет изменить непрозрачность элемента до определенного значения. Первым параметром мы можем передать значение в миллисекундах, на протяжении которого будет работать анимация. Вторым параметром передаем значение непрозрачности от 0 до 1.

Например, при клике по первой кнопке сделаем элемент полупрозрачным за полсекунды, а при клике по второй кнопке вернем прежнее значение непрозрачности мгновенно.

<button class="btn btn-success" id="hide">Полупрозрачный</button>
<button class="btn btn-primary" id="show">Непрозрачный</button>
$(function(){
	$('#hide').click(function(){
		$('.panel-body').fadeTo(500, .5);
	});
	$('#show').click(function(){
		$('.panel-body').fadeTo(0, 1);
	});
});

Как видим, работа с различными методами анимации очень похожа, при этом использование тех или иных методов дает нам разный эффект анимации. На этом мы завершим текущую статью. Больше о 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