如何在此进度条中添加航点？

Question

如何在此进度条中添加Waypoint？通过此代码，它只是动画，而我需要在用户滚动时为其设置动画。我也在使用航点，但不知道如何将它集成到这个片段中。     jQuery的（文件）。就绪（函数（）{

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