jquery - 滚动动画进度条

Question

我有一个在页面加载时动画的进度条，但我希望它在用户向下滚动到它时动画，因为它将位于页面的中间。现在如果页面加载，用户看不到动画。

所以本质上，动画应该暂停，直到用户向下滚动到某个点，一旦看到栏，动画就会开始。

这是我到目前为止的Javascript：

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

这是一个更详细的 jsfiddle：http: //jsfiddle.net/YAZJb/

Answer 1

这个怎么样？

我更新了你的jsFiddle http://jsfiddle.net/YAZJb/1/

基本上我所做的只是在类中添加一个width:100%;andposition:fixed;到你的 divmeter

那当然是，如果我正确理解了您的问题？即使用户滚动，您希望进度条保持在视图中？

更新：

你可以使用像 inview 插件这样的东西。这是下载，演示在这里。将它包裹在您自己的进度条脚本中，直到在视图中它才会开始动画。