jquery - Sequentially fade in divs when in viewport -

i'm working on making group of div's fade in sequentially when come view on screen. however, i'm still having trouble getting work.

i have 5 div's class hideme want fade in once come view.

the html these div's quite simple:

<div class="hideme">     <h3 class="text-white">one</h3>     <img src="../link-to-image.jpg">     <p>some text goes here!</p> </div> 

so far, have jquery, i'm not sure it's gone wrong, think there might few syntax errors in there.

var divs = $('.hideme');  $(window).on('scroll', function() {      $.each(divs, function(i, item) {          if($(item).offset().top <= $(window).scrolltop();) {             settimeout(function() {             $(item).css('opacity', '1');         }, 1000 * i);         }      });  }); 

your javascript console can useful in finding syntax errors tell are.

in particular, line:

if($(item).offset().top <= $(window).scrolltop();) { 

there should not semicolon inside if:

if($(item).offset().top <= $(window).scrolltop()) { 

http://jsfiddle.net/hhzjg/

another thing realize here window.scroll going fire many times in process of scrolling down through page. going end whole bunch of settimeouts stacking, isn't ideal approach.