在滚动上激活动画

Question

我在项目中使用http://www.justinaguilar.com/animations/index.html，似乎无法在滚动到时激活动画。加载该页面后动画立即开始。

http://jsfiddle.net/m2phK/

$(window).scroll(function() {
    $('#object').each(function(){
    var imagePos = $(this).offset().top;

    var topOfWindow = $(window).scrollTop();
        if (imagePos < topOfWindow+200) {
            $(this).addClass("fadeIn");
        }
    });
});

Answer 1

我更改了脚本，因此只要框进入视口，它就会运行动画。

http://jsfiddle.net/yq3Hc/

$(window).scroll(function() {
        $('#object').each(function(){
        var imagePos = $(this).offset().top;

        var topOfWindow = $(window).scrollTop();
            if (imagePos < topOfWindow+imagePos) {
                $(this).addClass("fadeIn");
            }
        });
});

在我添加＆＃34; imagePos＆＃34;之前有一个值（在你的情况下是200）。这意味着您需要向上滚动框，直到浏览器窗口顶部和框之间有200px。由于没有任何东西出现在你的盒子之后，你无法将它推到那么远，你需要改变它。

我希望这会有所帮助。