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

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

видео Плавное появление блока (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 мс
rss