停止 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 的动画相同，但效率更高。