如何将航点添加到此进度条？

Question

如何将航点添加到此进度条？通过这段代码，它只是动画，而我需要在用户滚动时对其进行动画处理。我也在使用航点，但不知道如何将它集成到这个 sn-p 中。 jQuery(document).ready(function(){

jQuery('.skillbar').each(function(){
    jQuery(this).find('.skillbar-bar').animate({
        width:jQuery(this).attr('data-percent')
    },6000);

});

});

Answer 1

试试这个代码

$(document).ready(function( ){
        var waypoint = new Waypoint({
              element: document.getElementById('mycontainer'),//Id of container
              handler: function(direction) {
                ProgressBar();
              }
        });

        function ProgressBar(){
            jQuery('.skillbar').each(function(){
                jQuery(this).find('.skillbar-bar').animate({
                    width:jQuery(this).attr('data-percent')
                },6000);

            });
        }
});

Answer 2

尝试使用以下代码：

 function animateProgressBar(){
$(".skillbar > span").each(function() {
    $(this)
        .data("origWidth", $(this).width())
        .width(0)
        .animate({
            width: $(this).data("origWidth")
        }, 1200);
});
}

var waypoint = new Waypoint({
  element: document.getElementById('containerId'),
  handler: function(direction) {
    animateProgressBar();
  }
});