Reveal Div, как пользователь прокручивает вниз

Question

У меня есть рабочий демо на основе другой скрипки здесь: http://jsfiddle.net/jackdent/gRzPF/12/

В основном я, как я могу получить дивы исчезать в, а не просто загружать сразу.

Вот код, который я использовал:

$(".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(); 

И это моя рабочая скрипку:

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

Я полностью довольно новый для JQuery и я принял этот код из примера выше. Он отлично работает, я просто хотел бы, чтобы DIVs fadeIn.

Я был бы признателен за любую помощь, чтобы получить эту работу.

Answer 1

Изменить эту строку:

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

к этому:

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

300 быть время в миллисекундах, что требуется, чтобы появиться.

DEMO

Answer 2

Просто измените

.removeClass("noshow"); 

в

.fadeIn(); 

FadeIn имеет некоторые дополнительные параметры, такие как продолжительности см here.

Answer 3

Удалить класс noshow, а затем использовать JQuery анимации функцию, чтобы исчезнуть в с непрозрачностью CSS собственности:

$(".reveal").css('opacity', '0'); 
$(".reveal").removeClass('noshow'); 
$(".reveal").animate("opacity+=1"); 

дополнительных аргументов