javascript - 当用户向下滚动时显示 Div

Question

我有一个基于另一个 fiddle 的工作演示:http://jsfiddle.net/jackdent/gRzPF/12/

基本上我怎样才能让 div 淡入而不是直接加载。

这是我使用的代码:

$(".reveal").addClass("noshow");
var contentNumber = 0;

function reveal() {
    var constraintNumber = contentNumber + 7;
    //IMPORTANT - DO NOT DELETE
    $(window).trigger('resize');
    //IMPORTANT - DO NOT DELETE
    for (i = contentNumber; i < constraintNumber; i++) {
        //Get the nth div of class content, where n is the contentNumber, and make it shown
        $('.reveal').eq(contentNumber).removeClass("noshow");
        contentNumber ++;
    }
}

//Window scroll function
$(window).scroll(function() {
   if ($(window).scrollTop() == $(document).height() - $(window).height() )
    {
        reveal();
    }
});
reveal();

这是我的工作 fiddle :

http://jsfiddle.net/barrycorrigan/4Ur6R/

我对 jQuery 完全陌生，我从上面的示例中获取了这段代码。它工作得很好，我只是想让 DIV 淡入。

如果您能提供任何帮助以使其正常工作，我将不胜感激。

Answer 1

更改此行:

$('.reveal').eq(contentNumber).removeClass("noshow");

对此:

$('.reveal').eq(contentNumber).fadeIn('300');

300 是出现的时间(以毫秒为单位)。

DEMO