Javascript 带有航路点的动画进度条

我试图在使用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();
      }
    });
});

我得到了未捕获的参考错误：未定义航路点：（

---

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

您需要在航路点的

处理程序
方法中调用
animateProgressBar
函数

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

你有什么问题吗？这里的JSFIDLE动画工作和waypoint.js并不涉及，因此很难知道你到底需要什么帮助。看起来很简单，它是关于设置你的元素目标并在处理程序中调用你的动画函数。我只是不确定，如何将我的东西与waypoint.js集成。我应该集成在我的
animateProgressBar（）
？或之后？任何快速提示都会有很大帮助。非常感谢您的帮助。现在就尝试一下。我应该在这一行替换什么？
元素：document.getElementById（'thing'）），
将“thing”替换为进度条容器的id。
处理程序
方法将在您滚动该容器时触发。我已经这样做了。现在，我遇到了另一个小问题。“航路点已定义，但从未使用。”示例：将
替换为
，并在javascript代码中：
元素：document.getElementById（'meters'）