“重新启动”的进度栏单击

Question

基本上，我想要动画的启动带的进度条，设置宽度从0到100%。唯一的问题是它只适用于第一次尝试。我想让它再次显示动画后，单击相同的元素。

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)

     });
  });

小提琴