JQuery动画

Question

我正在做一个计时器，而时间是通过移动字母和div的位移的进度。

我的问题是，当我停止计时器不会停止jQuery的动画，所以我想提出一个暂停按钮，继续

<div class="container"> 
    <div class="title"> 
     <h1>Cronometro Ceballos</h1> 
    </div> 
    <div class="set"> 
     <div class="assign" id="break"> 
      <p>BREAK LENGTH</p> 
      <form action="" id="countform1"> 
       <input type="button" class="menos" id="menosB" value="-"> 
       <input type="text" class="valor" id="inBreak" value="1" maxlength="3" > 
       <input type="button" class="mas" id="masB" value="+"> 
      </form> 

     </div> 
     <div class="assign" id="Session"> 
      <p>SESSION LENGTH</p> 
      <form action=""> 

       <input type="button" class="menos" id="menosS" value="-"> 
       <input type="text" class="valor" id="inSession" value="1" maxlength="3" > 
       <input type="button" class="mas" id="masS" value="+"> 
      </form> 
     </div> 
    </div> 
    <div class="get"> 
     <div id="result" class="result" onclick="count.Timer.toggle();"> 

      <div class="progress"></div> 
      <div class="content"> 
       <p id="text">Session</p> 
       <h2 id="conteo">1</h2> 
      </div> 
     </div> 
    </div> 
</div> 

JS

<script> 

    $('#masB').click(function(){ 
     var valor = parseInt($("#inBreak").val())+1; 
     if (valor < 1000) { 
      $("#inBreak").val(valor); 
     } 
    }); 

    $('#menosB').click(function(){ 
     var valor = parseInt($("#inBreak").val())-1; 
     if (valor > 0) { 
      $("#inBreak").val(valor); 
     } 
    }); 

    $('#masS').click(function(){ 
     var valor = parseInt($("#inSession").val())+1; 
     if (valor < 1000) { 
      $("#inSession").val(valor); 
      $("#conteo").text(valor); 
     } 
    }); 

    $('#menosS').click(function(){ 
     var valor = parseInt($("#inSession").val())-1; 
     if (valor > 0) { 
      $("#inSession").val(valor); 
      $("#conteo").text(valor); 
     } 
    }); 

    function pad(number, length) { 
     var str = '' + number; 
     while (str.length < length) {str = '0' + str;} 
     return str; 
    } 

    function formatTime(time) { 
     time = time/10; 
     var min = parseInt(time/6000), 
     sec = parseInt(time/100) - (min * 60), 
     hundredths = pad(time - (sec * 100) - (min * 6000), 2); 
     return (min > 0 ? pad(min, 1)+':' : "")+ pad(sec, 2); 
    } 

    var count = new (function() { 

     var $countdown; 
     var $form; 
     var i = 1; 
     var incrementTime = 70; 
     var currentTime = 1; 

     $(function() { 
      $countdown = $('#conteo'); 
      count.Timer = $.timer(updateTimer, incrementTime, false); 
      $('#result').click(function(){ 
       $('.progress').animate({height: '100%' }, currentTime); 

      }); 
     }); 


     function updateTimer() { 
      var timeString = formatTime(currentTime); 
      $countdown.html(timeString); 


      if (currentTime == 0) { 
       count.Timer.stop(); 

       if (i % 2 == 0) { 
        var time = $('#inBreak').val() * 60; 
        count.resetCountdown(time); 
       } 
       else{ 
        var time = $('#inSession').val() * 60; 
        count.resetCountdown(time); 
       } 
       return; 
      } 

      currentTime -= incrementTime; 
      if (currentTime < 0) currentTime = 0; 

     } 

     this.resetCountdown = function(time) { 

      var newTime = parseInt(time) * 1000; 

      i++; 
      $('.progress').css('height', '0%'); 
      if (i % 2 == 0) { 
       $('.progress').css('background-color', '#99CC00'); 
       $('.result').css('border-color', '#99CC00'); 
       $('.progress').animate({height: '100%' }, newTime); 
       $('#text').text('Session'); 
      } 
      else{ 
       $('.progress').css('background-color', '#FF4444'); 
       $('.result').css('border-color', '#FF4444'); 
       $('.progress').animate({height: '100%' }, newTime); 
       $('#text').text('Break'); 
      } 

      if (newTime > 0) { 
       currentTime = newTime; 
      } 

      count.Timer.stop().once(); 

      count.Timer.play(); 
     }; 

    }); 

</script> 

链接：https://codepen.io/edwardc08/full/KqaVeX/

Answer 1

我在定时器动画上实现了“暂停”。

使用“标志”来记住播放/暂停状态，您可以控制动画。

$(function() { 
    $countdown = $('#conteo'); 
    count.Timer = $.timer(updateTimer, incrementTime, false); 

    // flag 
    var animationRunning = false; 

    $('#result').click(function(){ 

    if(!animationRunning){ 
     $('.progress').animate({height: '100%' }, currentTime); 
    }else{ 
     $('.progress').stop(); // Stop the animation. 
    } 

    // Toggle flag. 
    animationRunning = !animationRunning; 
    }); 
}); 

这是CodePen updated。