Плавное появление — jQuery

Сегодня мы продолжим изучение js библиотеки jQuery и научимся делать плавное появление и плавное исчезание элементов. Делается это очень просто. Главное - не забудьте заранее подключить свежую библиотеку jquery. Рассмотрим подробнее на примере.

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

<span class="toggle-block">Скрыть блок</span>
<div class="block">Содержимое блока</div>

Теперь напишем скрипт, который будет скрывать блок с классом block при клике на надпись с классом toggle-block:

$('.toggle-block').click(function() {
	if ($('.block').is(':visible')) {
		$('.block').hide('slow');
		$(this).html('Показать блок')
	}
	else {
		$('.block').show('slow');
		$(this).html('Скрыть блок')
	}
});

Дополнительно я добавил замену текста: Скрыть блок на Показать блок для более правильной работы. Вот собственно и все. С помощью простых команд show() и hide() мы добились нужного эффекта. Помимо значений slow, normal и fast, скорость можно указывать явно в миллисекундах (например, show(900)).

Полный код страницы:

<!DOCTYPE html>
<html>
<head>
<title>jQuery - плавное появление</title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<span class="toggle-block">Скрыть блок</span>
<div class="block">Содержимое блока</div>
<script>
$('.toggle-block').click(function() {
	if ($('.block').is(':visible')) {
		$('.block').hide('slow');
		$(this).html('Показать блок')
	}
	else {
		$('.block').show('slow');
		$(this).html('Скрыть блок')
	}
});
</script>
</body>
</html>

26.03.17

Ссылка на статью:

https://webkab.ru/plavnoe-poyavlenie-jquery/