Не работает коректно animate() при повторении

Question

я только начинаю учить jquery , и не могу понять как остановить функцию goBack() после первого использования. Мне кажется она продолжает работать из-за чего не выполняется первая анимация при повторном клике после выполнения всех анимаций. Подскажите пожалуйста , как можно решить данную ошибку ?

Js

$(function () {

    let arr = [142, 302, 462, 622, 782]

    $('.box').each(function (index) {
        $(this).on('click', function () {
            $(this).addClass('big')
            $('.modal-container').css({
                backgroundColor: 'rgba(0, 0, 0, 0.483)',
                zIndex: 3
            });

            $(this).stop().animate({
                top: '120%',
                left: '30%',
                width: '300px',
                height: '300px'
            }, 1000)
            setTimeout(function () {
                goBack(index);
            }, 1000);
        })

    })

    function goBack(index) {
        $('.big').queue(function () {
            $(this).on('click', function () {
                setTimeout(function (elem) {
                    $('.big').removeClass('big')
                    $('.modal-container').css({
                        backgroundColor: '#fff',
                        zIndex: -3
                    });

                }, 1000);


                $(this).stop().animate({
                    top: '10px',
                    left: arr[index] - 132,
                    width: '150px',
                    height: '150px'
                }, 1000, )

            })
            $(this).dequeue();

        })
    }

})

JS-FIDDLE

https://jsfiddle.net/fg5r34xh/

Answer 1

Проблема была в том, что Вы на один элемент вешаете 2 обработчика click и они срабатывают одновременно (после первого показа)

$(function () {
  let arr = [142, 302, 462, 622, 782];

  $(".box").each(function (index, item) {
    $(this).on("click", function () {
      if (!$(this).hasClass("big")) {
        $(this).addClass("big");
        $(".modal-container").css({
          backgroundColor: "rgba(0, 0, 0, 0.483)",
          zIndex: 3,
        });

        $(this).stop().animate(
          {
            top: "120%",
            left: "30%",
            width: "300px",
            height: "300px",
          },
          1000
        );
      } else {
        setTimeout(function (elem) {
          $(".big").removeClass("big");
          $(".modal-container").css({
            backgroundColor: "#fff",
            zIndex: -3,
          });
        }, 1000);

        $(this)
          .stop()
          .animate(
            {
              top: "10px",
              left: arr[index] - 132,
              width: "150px",
              height: "150px",
            },
            1000
          );
      }
    });
  });
});

БЛОГ НА HUSL

Не работает коректно animate() при повторении

Ответы (1 шт):