【问题标题】:Animating Bootstrap progress bar width with jQuery使用 jQuery 为 Bootstrap 进度条宽度设置动画
【发布时间】:2014-06-27 19:29:52
【问题描述】:

我想在 2.5 秒内将进度条的宽度从 0% 变为 70%。但是,下面的代码会在 2.5 秒延迟后立即将宽度更改为 70%。我错过了什么?

$(".progress-bar").animate({
    width: "70%"
}, 2500);

JSFiddle: http://jsfiddle.net/WEYKL/

【问题讨论】:

  • 我的朋友你用什么浏览器测试,我在firefox 28中检查你的代码,它工作得很好。

标签: javascript jquery twitter-bootstrap jquery-animate progress-bar


【解决方案1】:

问题在于默认的 Bootstrap 过渡效果,它会为 width 属性的任何更新设置动画。

如果你关闭它并抑制相应的样式,它会正常工作,例如:

.progress-bar {
    -webkit-transition: none !important;
    transition: none !important;
}

演示: http://jsfiddle.net/WEYKL/1/

【讨论】:

  • 做到了。我只是注意到 Safari 处理动画很好,但 Chrome 的 Bootstrap 的过渡效果有问题。谢谢!
  • @user3088077 是的,Chrome 很可能会尝试将这两种动画结合起来,并在 jQuery 动画已经在内部完成时只显示 CSS 过渡。
  • 如何在同一页面中使用多个进度条?
  • 如何让它变得从容?
【解决方案2】:

因此,通过 CSS 或 jQuery 调整过渡效果更有意义。

.progress-bar {
    -webkit-transition: width 2.5s ease;
    transition: width 2.5s ease;
}

只需更改宽度值。

$(".progress-bar").css('width', '70%');

【讨论】:

    【解决方案3】:

    这很容易如果使用引导进度条,

    只将属性 aria-valuenow="percent_required%" 添加到具有“progress-bar”类的 div 中,如下所示:

    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="57%" aria-valuemin="0" aria-valuemax="57">
    

    接下来,关于脚本:

    <script>
      $(document).on('ready',function(){
        $('.progress .progress-bar').css("width",function() {
          return $(this).attr("aria-valuenow") + "%";
        })
      })
    </script>
    

    重新加载,开始!

    【讨论】:

      【解决方案4】:

      你可以通过添加来修复它:

      .progress .progress-bar {
        transition: unset;
      }
      

      var delay = 500;
      $(".progress-bar").each(function(i) {
        $(this).delay(delay * i).animate({
          width: $(this).attr('aria-valuenow') + '%'
        }, delay);
      
        $(this).prop('Counter', 0).animate({
          Counter: $(this).text()
        }, {
          duration: delay,
          // easing: 'swing',
          step: function(now) {
            $(this).text(Math.ceil(now) + '%');
          }
        });
      });
      .progress {
        margin-bottom: 20px;
      }
      
      .progress-bar {
        width: 0;
      }
      
      .bg-purple {
        background-color: #825CD6 !important;
      }
      
      .progress .progress-bar {
        transition: unset;
      }
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
      
      <div class="container">
        <h2>Bootstrap 4 Progress Bars</h2>
        <div class="progress border">
          <div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">70</div>
        </div>
        <div class="progress border">
          <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50</div>
        </div>
        <div class="progress border">
          <div class="progress-bar progress-bar-striped progress-bar-animated bg-purple" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">90</div>
        </div>
      </div>

      【讨论】:

        猜你喜欢
        • 2021-06-30
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2015-03-23
        • 2016-02-24
        • 2023-03-27
        • 2021-10-21
        • 1970-01-01
        相关资源
        最近更新 更多