Jquery 重新启动引导程序'；s进度条onclick

基本上，我想通过将宽度从0设置为100%来设置引导的进度条的动画。唯一的问题是它只在第一次尝试时起作用。我希望它在单击同一元素后再次显示动画

HTML

CSS

试试看

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)

     });
  });

---

更新：我找到了这个jquery插件，它完全满足了我的需要

谢谢你的回复。除了在进度条达到100之前单击按钮时，按钮会消失并停止工作外，其他一切都正常工作。更新的答案请检查您是否对我的答案感到满意接受并投票。

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

})

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

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)

     });
  });