带航点的动画进度条

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

您需要在航路点的 handler 方法中调用 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();
      }
});