Bootstrap progress bar анимация не работает

Question

Hello! Im пытается оживить индикаторы выполнения, чтобы начать, когда я перейдите к данному разделу, но я не могу получить право 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> 

И мои ЯШ:

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>