停止jQuery动画进度条

Question

我想通过单击按钮停止进度条，但动画总是完成到定义的 50%。我错过了什么？

animation = ""

var getPercent1 = .5; 
var getProgressWrapWidth1 = $('.progress-wrap').width();
var progressTotal1 = getPercent1 * getProgressWrapWidth1;
  
 // .stop() used to prevent animation queueing
 $('.progress-bar').stop().animate({
  left: progressTotal1
 }, 3000);
 
 animation = setTimeout(function() {
  var getPercent2 = .8;
  var getProgressWrapWidth2 = $('.progress-wrap').width();
  var progressTotal2 = getPercent2 * getProgressWrapWidth2;   
  
  $('.progress-bar').stop().animate({
   left: progressTotal2
  }, 3000);
 }, 3100); 
 
function stopProgress() {
 clearTimeout(animation);
 $('progress-bar').stop();
}

.progress{width:100%;height:50px;border-radius:0}.progress-wrap{background:#18AC56;margin:20px 0;overflow:hidden;position:relative;-webkit-transition:background 1s;-moz-transition:background 1s;-o-transition:background 1s;transition:background 1s;}.progress-wrap .progress-bar{background:#ddd;left:0;position:absolute;top:0;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="progress-wrap progress">
    <div class="progress-bar progress"></div>
</div> 

<button type="button" onClick="stopProgress()">click to stop</button>

Answer 1

你少了一个'.'

$('progress-bar').stop();

应该是

$('.progress-bar').stop();

旁注：我建议您使用 Velocity.js 制作动画...它的语法与 jquery 的动画相同，但效率更高。

停止jQuery动画进度条

Stop jQuery animated progress bar

css

jquery

jquery-animate