Question

我有一个简单的进度条功能，我需要在单击停止按钮时停止它。这是我的代码 - http://jsfiddle.net/ratpfwvd/，而setInterval似乎无法正常工作。

HTML

<div class="progress-bar"><div></div></div>

<button class="start">start</button>
<button class="stop">stop</button>

CSS

.progress-bar{
    width:100%;
    height:5px;
    background-color:blue;
}

div{
    height:100%;
    width:0;
    background-color:red;
  }

脚本

var resetProgressBar =   setInterval(progress, 8000);

function progress(percent, $element) {
    var progressBarWidth = percent * $element.width() / 100;
    $element.find('div').animate({ width: progressBarWidth }, 8000, function(f) {
        var progressBarWidth = 0;
        $element.find('div').animate({ width: progressBarWidth }, 0);
    });
}

$('.start').click(function(){
      progress(100, $('.progress-bar'));
}); 

$('.stop').click(function(){
        clearInterval(resetProgressBar); 
});

Answer 1

由于您使用animate()进行动画制作，因此需要使用.stop()

$('.stop').click(function () {
    $('.progress-bar').find('div').stop()
});

演示：Fiddle

尝试停止进度条时，setInterval不起作用

1 个答案: