Question

您好！当我滚动到这一部分但我无法获得正确的js代码时，我试图动画进度条的动画... 我的HTML看起来像这样：

<p>Our Team Skills</p>
<div class="progressbar">
    <p>Corel Draw</p>
    <div class="progress">
        <div class="progress-bar progress-bar-success " role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
            <span class="sr-only">80% Complete (success)</span>
        </div>
    </div>
</div>

我的js：

var $progress = $(".progress-bar");
var $section = $('.progress-bar');
var $queue = $({});
$(function() {

    var $section = $('.progress-bar');

    function loadDaBars() {
        $(".progress-bar").each(function() {
            $(this)
                .data("progress-bar", $(this).width())
                .width()
                .animate({
                    width: $(this).data("progress-bar")
                }, 2500);
        });
    }

    $(document).bind('scroll', function(ev) {
        var scrollOffset = $(document).scrollTop();
        var containerOffset = $section.offset().top - window.innerHeight;
        if (scrollOffset > containerOffset) {
            loadDaBars();
            // unbind event not to load scrolsl again
            $(document).unbind('scroll');
        }
    });

});

我缺少什么？

Answer 1

你想要这样的东西

＆＃13;

var $progress = $(".progress-bar");
var $section = $('.progress-bar');
var $queue = $({});
$(function() {

var $section = $('.progress-bar');

function loadDaBars() {
            $(".progress-bar").each(function() {
                $(this)                    
                    .animate({
                        width: '100%'
                    }, 2500);
            });
}

$(document).bind('scroll', function(ev) {
    var scrollOffset = $(document).scrollTop();
    var containerOffset = $section.offset().top - window.innerHeight;
    if (scrollOffset > containerOffset) {
        loadDaBars();
        // unbind event not to load scrolsl again
        $(document).unbind('scroll');
    }
});
});

＆＃13;

.a{
  height:1000px;
  width:20px;
  }

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="a"></div>
<p >Our Team Skills</p>
  <div class="progressbar">

    <p>Corel Draw</p>
    <div class="progress">
      <div class="progress-bar progress-bar-success " role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
        <span class="sr-only">80% Complete (success)</span>
      </div>
    </div>
  </div>

＆＃13;

Bootstrap进度条动画不起作用

1 个答案: