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

Fiddle

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

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

最佳答案

您需要在航点的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();
      }
});

关于javascript - 带有航点的动画进度栏，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32527669/