Reanimate Bootstrap Fortschrittsbalken onclick

Question

Grundsätzlich möchte ich Bootstrap Fortschrittsbalken animieren, indem Sie die Breite von 0 bis 100%. Das einzige Problem ist, dass es nur beim ersten Versuch funktioniert. Ich möchte, dass die Animation nach dem Klicken auf das gleiche Element erneut angezeigt wird.

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

Update: fand ich diese jQuery-Plugin, das tut, was genau ich brauche. http://www.jqueryscript.net/demo/Easy-jQuery-Progress-Bar-Timer-Plugin-For-Bootstrap-3-progressTimer/

Answer 2

Probieren Sie es

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