Как возобновить заново анимацию, если окно скрыто?

Question

[Genri_Rus]

Вот пример: https://codepen.io/Genri_Rus/pen/BaaWxYb

Если много раз кликать, то анимация все время проигрывается, а как ее остановить если человек много раз кликал по иконке меню ?

И как сделать эффект пульсирования более реалистичным ?

Answer 1

[Виталий]

Как вариант после клика менять(добавлять) стиль(или атрибут), и если стиль такой-то, то не производить никаких действий. По эффектам не подскажу

Comments

[Genri_Rus]

Я знаю, что в jQuery есть функция stop типа:

$('body').stop(true, true).fadeOut(500);

Но как правильно ей воспользоваться, никак не могу понять

[Genri_Rus]

Ну вот допустим добавляю класс: $('body').toggleClass('menu-show');

Если он есть, то просто стопить анимацию ?

[Genri_Rus]

Типа так: https://codepen.io/Genri_Rus/pen/BaaWxYb ?

[Виталий]

Genri_Rus,

$('.menu-icon').on('click', function(){
    if ($('body').hasClass('a menu-show')) {
        alert('1');
    } else {
        $('body').toggleClass('menu-show');


        $('li').each(function (i) {
            $(this).delay(i * 150).animate({itemAnimate: 1.5}, {
                step: function (s) {
                    $(this).css("transform", 'scale(' + s + ')');
                }, duration: 450,
            }, "linear");

            $(this).delay(i * 50).animate({itemAnimate: 1}, {
                step: function (s) {
                    $(this).css("transform", 'scale(' + s + ')');
                }, duration: 700,
            }, "linear");
        });
        $('body').addClass('a');
    }
});

типо того, смотреть в этом направлении, я сам еще только учусь) можно без добавления класса просто проверять класс бади, но потом могу возникнуть ошибки при увеличение страницы

[Genri_Rus]

Виталий, а вы не встречали случаем похожие анимации ?