引导进度条动画不工作

Question

你好！I.我试图在滚动到这一节时将进度条动画化，但我无法正确地理解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

你想要这样的东西吗

​

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');
    }
});
});

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

<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>

​