javascript - 一个 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 .