Reanimate Bootstrap的進度條onclick

Question

基本上我想通過設置從0到100％的寬度來設置動畫Bootstrap的進度條。唯一的問題是它只能在第一次嘗試中起作用。我希望它在單擊相同的元素後再次顯示動畫。

HTML

<div class='progress progress-striped active'> 
    <div class='progress-bar progress-bar-success'></div> 
</div> 

<button class='play'>Animate from 0 to 100%</button> 

JS

$('.play').on('click', function(){ 
    $(".progress-bar").animate({ 
    width: "100%" 
}, 500); 

}) 

CSS

.progress {height:18px} 
.progress-bar {width:0} 
.progress-bar {background-color: #5fb1e2} 

JSFiddle

Answer 1

更新：我發現這個jQuery插件，不正是我所需要的。 http://www.jqueryscript.net/demo/Easy-jQuery-Progress-Bar-Timer-Plugin-For-Bootstrap-3-progressTimer/

Answer 2

試試吧

var p ; 
$('.play').on('click', function(){ 
if (p) { 
    p.prependTo("body"); 
    p = null; 
    } 
    $(".progress-bar").css('width', 0); 
    $(".progress-bar").stop().animate({ 
    width: "100%" 
    }, 500, function() { 
     setTimeout(function() { 
      p = $(".progress").detach(); 
      console.log(p); 
     }, 1000) 

    }); 
    }); 

Fiddle