带有航点的动画进度条

Question

我正在尝试使用waypont.js滚动到它时触发进度条的动画

JS

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

$(".meter > span").each(function() {
    var waypoint = new Waypoint({
      element: $(this),
      handler: function(direction) {
        animateProgressBar();
      }
    });
});

Fiddle

我得到Uncaught ReferenceError: Waypoint is not defined :(

任何提示/建议将不胜感激！

Answer 1

您需要在航点的animateProgressBar方法中调用handler函数

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


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