Как по клику на кнопку сделать медленное добавление блоков?

Frontend developer JQuery
1

Подскажите, как сделать плавное появление блоков, что бы как то плавно входили на страничку, по клику кнопки, или по достижению определенного уровня экрана?

2

Можно было бы сделать с изменением свойств display none на block и сделать какой то transition что бы плавно появлялись, но можно использовать методы JQuery что бы не морочится, но первый вариант был бы тоже хорошей практикой, вот пример с готовыми методами JQuery:

#div1 {
width:100px;
height:100px;
display:none;
background-color:red;
margin-bottom: 30px;
}
#div2 {
width:100px;
height:100px;
display:none;
background-color:blue;
margin-bottom: 30px;
}
#div3 {
width:100px;
height:100px;
display:none;
background-color:green;
margin-bottom: 20px;
}

Три блока которые мы добавляем, в стилях изначально задаем display:none что бы блоки не отображались изначально, в js части пишем что по клику на кнопку выполняется функция, далее выбираем блоки с помощью JQuery, вызываем на них метод fadeIn(), этот метод может принимать как строковые значения, так и числовые, числовые это милисекунды, а строковые это просто как быстро, например slow.

<div id="div1">

<div id="div2">

<div id="div3">



Нажми что бы увидеть эффект

$(document).ready(function(){

    $("button").click(function(){

        $("#div1").fadeIn("slow");

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

        $("#div3").fadeIn(1500);

    });

});