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

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

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

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

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

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

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

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

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

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

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

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