Reveal Div as user scrolls down

Question

I have a working demo based on another fiddle here: http://jsfiddle.net/jackdent/gRzPF/12/

Basically I how can I get divs to fade in rather than just load straight off.

Here is the code I have used:

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

And this is my working fiddle :

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

I am totally newish to jQuery and I have taken this code from the example above. It works perfectly I would just like the DIVs to fadeIn.

I would be grateful for any help to get this working.

Answer 1

Change this line:

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

to this:

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

300 being the time in milliseconds it takes to appear.

DEMO

Answer 2

Just change

.removeClass("noshow");

to

.fadeIn();

fadeIn has some extra parameters like durations, see here .

Answer 3

Remove the noshow class and afterwards use the jQuery animate function to fade in with opacity css property:

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

http://api.jquery.com/animate/ for extra arguments