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

Question

[Сергей Игнатьев]

При клике на кнопку происходят 3 последовательных анимации, и после этого <div style="display:none> становится видимым.

Вот нужно сделать паузу (1-2 сек), чтобы успела пройти анимация и только потом происходило отображение невидимого блока. А так получается, что анимацию не видно и сразу всплывает блок.

<script type="text/javascript">
        $(document).ready(function () {

            $("#but1").click(function () {
                $(".out").addClass("animation roll-out-left");
                $(".out1").addClass("animation fade-out delay-05s");
                $(".out3").addClass("animation fade-out delay-1-5s");
/тут нужна пауза/
                $(".section2").css("display", "inline");
            });
                  });

    </script>

Answer 1

[Даниил Сорокин]

setTimeout(function(){
$(".section2").css("display", "inline");
}, 2000);

Comments

[Сергей Игнатьев]

Спасибо большое за помощь!

Answer 2

[Евгений]

Можете слушать события такие как "animationend" или "transitionend" и после делать что вам нужно:

$(".out3").on('animationend', function () {
    $(".section2").css("display", "inline");
});

Либо воспользоваться таймером:

setTimeout(function () {
    $(".section2").css("display", "inline");
}, 1000);

Comments

[Сергей Игнатьев]

Спасибо большое за подробный ответ!