Question

我尝试为页面上的元素设置动画，以便在用户向下滚动到元素时显示它们。需要设置动画的每个元素都标有class =＆＃34; hideme＆＃34;。并使用以下函数：

$(document).ready(function() {
$(window).scroll( function(){
    $('.hideme').each( function(i){
        var bottom_of_object = $(this).position().top + $(this).outerHeight();
        var bottom_of_window = $(window).scrollTop() + $(window).height();
        if( bottom_of_window > bottom_of_object ){
            $(this).eq(i).animate({'opacity':'1'},2000);
        }
    }); 
});

但是，这会立即激活所有元素，而不仅仅是当用户滚动到该元素时。

我已经阅读了有关使用延迟函数的建议，但这不起作用，因为我们只想在用户实际滚动到该元素时才加载元素。我也尝试过使用eq（），但我也不认为这样做了。

问题：仅当用户滚动到每个元素时，如何为每个元素设置动画？

JSFiddle ：http://jsfiddle.net/6mochuff/

Answer 1

你不应该在循环中使用eq和this，这没有多大意义。您可以将循环中的当前元素称为this。所以代码将成为：

$(window).scroll(function () {
    $('.hideme').each(function (i) {
        var bottom_of_object = $(this).position().top + $(this).outerHeight();
        var bottom_of_window = $(window).scrollTop() + $(window).height();
        if (bottom_of_window > bottom_of_object) {
            $(this).animate({opacity: 1}, 2000);
        }
    });
});

当你滚动到每个元素而不是一次全部时，如何动画Jquery

1 个答案: