100％に達したらプログレスバーアニメーションを停止しますか？

Question

jQueryとCSSを使用して進行状況バーを作成しようとしています。現時点では、CSSを使用してプログレスバーを作成しました。jQueryを使用してアニメーション化できます。しかし、進捗バー（アニメーションの読み込み中）が100%に達すると停止するのを止めることはできません。

問題を説明するために、私はこの作業スニペット作成している：あなたはスニペットを実行する場合は、プログレスバーは、それが100％に合格した場合にもいっていることがわかります

$(document).ready(function() { 
 
    $('.progress-bar').css({ 
 
    'width': '0%' 
 
    }); 
 

 
    setInterval(function() { 
 
    // place this within dom ready function  
 
    if (currentProgress == '100') { 
 
     alert('all downloaded'); 
 
    } else { 
 
     var currentProgress = $(".progress-bar").width()/$('.progress-bar').parent().width() * 100; 
 
     var setWidth = Number(currentProgress) + 25; 
 
     if (currentProgress > 80) { 
 
     $('.progress-bar').css({ 
 
      'width': '' + setWidth + '%', 
 
      'background-color': '#86e01e' 
 
     }); 
 
     } else { 
 
     $('.progress-bar').css({ 
 
      'width': '' + setWidth + '%', 
 
      'background-color': '#f27011' 
 
     }); 
 
     } 
 
    } 
 
    }, 3000); 
 

 
    // use setTimeout() to execute 
 
    //setTimeout(showpanel, 3000); 
 
});

container { 
 
    margin: 60px auto; 
 
    width: 90%; 
 
    text-align: center; 
 
} 
 

 
.container .progress { 
 
    margin: 0 auto; 
 
    width: 90%; 
 
} 
 

 
.progress { 
 
    padding: 4px; 
 
    background: rgba(0, 0, 0, 0.25); 
 
    border-radius: 6px; 
 
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08); 
 
} 
 

 
.progress-bar { 
 
    height: 16px; 
 
    border-radius: 4px; 
 
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05)); 
 
    transition: 0.4s linear; 
 
    transition-property: width, background-color; 
 
    box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1); 
 
}

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

を。

誰かがこの問題についてアドバイスできますか？どんな助けもありがとう。

Answer 1

プログラムが停止しなかった理由は、間隔を停止しなかったことです。それとは別に、幅を設定する際に間違いがあります。

私はあなたのフィドルに基づいて更新されたコードを添付しています： - `currentProgress`が90であるとき、何が起こる

$(document).ready(function() { 
 
    $('.progress-bar').css({ 
 
    'width': '0%' 
 
    }); 
 

 

 
    var currentProgress = 0; 
 
    var setWidth = 0; 
 
    var timer = setInterval(function() { 
 
    // place this within dom ready function 
 
    if (currentProgress >= 100) { 
 
     alert('all downloaded'); 
 
     clearInterval(timer); 
 
    } else { 
 
     currentProgress = Math.round($(".progress-bar").width()/$('.progress-bar').parent().width() * 100); 
 

 
     if (currentProgress > 70 && currentProgress <= 100) { 
 
     $('.progress-bar').css({ 
 
      'width': '' + setWidth + '%', 
 
      'background-color': '#86e01e' 
 
     }); 
 

 
     } else if (currentProgress < 100) { 
 
     $('.progress-bar').css({ 
 
      'width': '' + setWidth + '%', 
 
      'background-color': '#f27011' 
 
     }); 
 
     } 
 

 
     setWidth = currentProgress + 25; 
 
    } 
 
    }, 3000); 
 
});

container { 
 
    margin: 60px auto; 
 
    width: 100%; 
 
    text-align: center; 
 
} 
 

 
.container .progress { 
 
    margin: 0 auto; 
 
    width: 100%; 
 
} 
 

 
.progress { 
 
    padding: 4px; 
 
    background: rgba(0, 0, 0, 0.25); 
 
    border-radius: 6px; 
 
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08); 
 
} 
 

 
.progress-bar { 
 
    height: 16px; 
 
    border-radius: 4px; 
 
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05)); 
 
    transition: 0.4s linear; 
 
    transition-property: width, background-color; 
 
    box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1); 
 
}

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

Answer 2

window.clearInterval(intervalID)を検索しています。intervalIDは、window.setInterval(func, delay, ...)の結果です。

また、あなたが助けることができるならば、setInterval！の代わりにsetTimeoutを使用することができます。

Answer 3

あなたがしなければならないことを、あなたのsetWidthを修正している。

var setWidth = Number(currentProgress) > 75 ? 100 : Number(currentProgress) + 25; 

今、あなたのバーが停止します。

あなたのコードは理想的ではありません。私は、変数timerに割り当てられているか

var timer = setInterval(function() { 
    // place this within dom ready function  
    if (currentProgress == '100') { 
     alert('all downloaded'); 
    } else { 
     var currentProgress = $(".progress-bar").width()/$('.progress-bar').parent().width() * 100; 
     var setWidth = Number(currentProgress) > 75 ? 100 : Number(currentProgress) + 25; 
     if (currentProgress > 80) { 
     $('.progress-bar').css({ 
      'width': '' + setWidth + '%', 
      'background-color': '#86e01e' 
     }); 
     } else { 
     $('.progress-bar').css({ 
      'width': '' + setWidth + '%', 
      'background-color': '#f27011' 
     }); 
     } 
    } 
    if (setWidth>=100){clearInterval(timer);} 
    }, 3000); 

お知らせをしてclearInterval()

Answer 4

currentprogressの引数としてであることを使用：それはあなたがそうのように、後でそれを止めることができるように変数にあなたのsetIntervalを割り当てることが最善でありますif条件でアクセスできない