Все для создания и продвижения сайтов

Верстка, программирование, SEO

Плавное появление блока (div) в Jquery

количество просмотров 24879
Плавное появление блока (div) в Jquery

В Jquery есть множество различных способов для того, чтобы сделать плавное появление или исчезновения определённых блоков div.

Мы рассмотрим самую популярную функции fadein - для плавного появления и fadeout - для изчезновения.

Рассмотрим на примере, создадим блок и применим к нему следующие стили:

#block{
	background: red;
	width: 100px;
	height: 100px;
	display: none; // скрываем блок
	}    

Мы создали простой блок с уникальным идентификатором и изначально скрыли его.

Теперь напишем простой скрипт для его появления.

$("#block").fadeIn();

Теперь при обновлении страницы мы увидим, что наш блок плавно отображается на экране. Сама функция, просто плавно меняет свойство "display".

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

$("#block").fadeIn(1000);

Примеры использования

$("#block").fadeIn() Появление блока в течении 400 мс
$("#block").fadeIn(500) Появление блока в течении 500 мс
$("#block").fadeIn("slow") Появление блока в течении 600 мс
Последние статьи

Инструменты

Отблагодарить и поддержать автора
Если вы нашли ошибку, выделите её и нажмите Ctrl+Enter
Выделите опечатку и нажмите Ctrl + Enter, чтобы отправить сообщение об ошибке.