jquery - jQuery航点函数

Question

我是 jQuery 新手，我不知道该怎么做。

我有jQuery waypoint 插件，还有一个动画进度条的功能。我需要做的是在到达航点时为进度条设置动画。我有两段代码，但似乎无法将它们放在一起。

我需要把这个：

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

这里面：

$(function() {
    $('#skills-1').waypoint(function() {
        (function here)
    });
}); 

Answer 1

$(function() {
    $('#skills-1').waypoint(function() {
        $(".meter > span").each(function() {
            $(this)
                .data("origWidth", $(this).width())
                .width(0)
                .animate({
                    width: $(this).data("origWidth")
            }, 1200);
        });
    });
}); 

把它放在里面，没有函数包装。

或者，如果您有多个航路点，最好制作一个单独的函数，如下所示：

function animateProgressBar(){
    $(".meter > span").each(function() {
        $(this)
            .data("origWidth", $(this).width())
            .width(0)
            .animate({
                width: $(this).data("origWidth")
        }, 1200);
    });
}
$('#skills-1').waypoint(animateProgressBar);
$('#skills-2').waypoint(animateProgressBar);