jQueryのアニメーション進行状況バーを停止

Question

ボタンをクリックして進行状況バーを停止したいのですが、アニメーションは常に定義された50％まで終了します。私は何が欠けていますか？

animation = "" 
 

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

サイドノートでなければなりません：私は、それがjQueryのアニメーションと同じ構文を得たが、はるかに効率的であるだ...あなたは、アニメーションのためのVelocity.jsを使用することをお勧めします。