Question

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

＆＃13;

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();
}

＆＃13;

.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;}

＆＃13;

<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>

＆＃13;

Answer 1

你错过了一点'。'

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

应该是

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

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

停止jQuery动画进度条

1 个答案: