Запретить выполнять функцию во время анимации jquery

Question

Подскажите пожалуйста, как сделать что бы при выполнении одной анимации нельзя было выполнить вторую анимацию. disabled на button не подходит.

function go_anim_plus() {
  $("#block").animate({
    left: "+=100px",
  }, 500, function() {
    $("#block").animate({
      width: "+=100px",
    }, 500);
  })
}

function go_anim_minus() {
  $("#block").animate({
    left: "-=100px",
  }, 500, function() {
    $("#block").animate({
      width: "-=100px",
    }, 500);
  })
}

#block {
  width: 50px;
  height: 50px;
  background: red;
  position: absolute;
  top: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="block">

</div>

<button onclick="go_anim_plus();">Click plus</button>
<button onclick="go_anim_minus();">Click minus</button>

Answer 1

Самый простой способ, использовать отдельную переменную, по которой проверять, идёт ли в данный момент анимация или нет.
Вот пример:

let isAnim = false; // дефолтное "состояние" анимация

function go_anim_plus() {
  if(isAnim === false) { // Проверяем, есть ли анимация
    isAnim = true; // от начала анимации до его завершения будем менять "состояние", чтобы не пропускать код на проверке выше.
    $("#block").animate({
      left: "+=100px",
    }, 500, function() {
      $("#block").animate({
        width: "+=100px",
      }, 500, function() {
        isAnim = false; // После завершения последней анимации возвращаем "состояние" на дефолт.
      });
    })
  }
}

function go_anim_minus() {
  // Аналогично
  if(isAnim === false) {
    isAnim = true;
    $("#block").animate({
      left: "-=100px",
    }, 500, function() {
      $("#block").animate({
        width: "-=100px",
      }, 500, function(){
        isAnim = false;
      });
    })
  }
}

#block {
  width: 50px;
  height: 50px;
  background: red;
  position: absolute;
  top: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="block">

</div>

<button onclick="go_anim_plus();">Click plus</button>
<button onclick="go_anim_minus();">Click minus</button>

Answer 2

можно запретить события указателя через pointer-events.

function go_anim_plus() {
  $('button').css({'pointer-events':'none'})
  $("#block").animate({
    left: "+=100px",
  }, 500, function() {
    $("#block").animate({
      width: "+=100px",
    }, 500, function(){
       $('button').css({'pointer-events':'auto'});
    });
  })
}

function go_anim_minus() {
  $('button').css({'pointer-events':'none'})
  $("#block").animate({
    left: "-=100px",
  }, 500, function() {
    $("#block").animate({
      width: "-=100px",
    }, 500, function(){
       $('button').css({'pointer-events':'auto'});
    });
  })
}

#block {
  width: 50px;
  height: 50px;
  background: red;
  position: absolute;
  top: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="block">

</div>

<button onclick="go_anim_plus();">Click plus</button>
<button onclick="go_anim_minus();">Click minus</button>

БЛОГ НА HUSL

Запретить выполнять функцию во время анимации jquery

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