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

Опубликовано: 01.09.2018

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

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

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

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

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

Оригинальное появление блоков на продающей странице при прокрутке

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

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

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

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

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

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