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

重新启动Bootstrap的进度条onclick

2 个答案: