Остановить .animate числа. JQuery

143

06 августа 2018, 16:00

Есть задача сделать уменьшение скидки по времени при открытии модального окна. При закрытии модального окна скидка должна останавливаться и запускаться с того же момента с которого и была остановлена (закрыто модальное окно).

$( "#gok" ).click(function() {
  var numb_start = $(".promo-lwo").text();
  $( {numberValue: numb_start} ).animate({numberValue: 1}, {
    // Скорость анимации, где 500 = 0,5 одной секунды, то есть 500 миллисекунд  
    duration: 12500,
    easing: "linear", 
    step: function(val) {
      // Блок, где необходимо сделать анимацию 
      $(".promo-lwo").html(Math.ceil(val));
    }
  });
});
/** Stop animation when button is clicked
    задаем функцию при нажатии на элемент с классом stop */
$( "#stop" ).click(function() {
  // останавливаем выполняемую анимацию
  $({numberValue}).stop([jumpToEnd]);
});

Проблема состоит в том что я не знаю, как его остановить. Если останавливать значения селектора, то там все понятно. А здесь не могу разобраться. Тыкал, подстанавливал - не выходит. Заранее спасибо за ответы!

Answer 1

Попробуйте использовать setInterval() вместо использования animate. Например:

var timerId; 
var counter = function() { 
  var numb_start = +$("#number").text(); 
  if (numb_start > 0) { 
    $("#number").html(numb_start - 1); 
  } else { 
    clearInterval(timerId); 
    $("#number").html("отсчёт окончен"); 
  } 
} 
 
$( "#start" ).click(function() { 
  if (+$("#number").text() > 0) { 
    timerId = setInterval(counter, 500); 
  } else { 
    $("#number").html("отсчёт окончен"); 
  } 
}); 
 
$( "#stop" ).click(function() { 
  // останавливаем выполняемую анимацию 
  if (timerId != undefined) clearInterval(timerId); 
});

button { 
    background-color: #4CAF50; /* Green */ 
    border: none; 
    color: white; 
    padding: 15px 32px; 
    text-align: center; 
    text-decoration: none; 
    display: inline-block; 
    font-size: 16px; 
    cursor: pointer; 
} 
 
#number { 
  border: 1px solid red; 
  margin-top: 20px; 
  padding: 10px; 
  font-size: 20px; 
  text-align: center; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<button id="start">Начать/продолжить отсчёт</button> 
<button id="stop">Пауза</button> 
<div id="number">100</div>