0

I have the following function set up to sequentially fade in divs (with class "device") on page load.

I would like to modify this so that the function triggers when the divs (with class "device") come into the viewport.

The page is a large, horizontal scrolling page. The divs are spaced wide enough apart that they are out of the viewport until some scrolling happens.

Does anyone know how I might achieve this?

Many thanks.

<script>
$(function() {
    var $sequence = $('div[class=device]').hide(), div = 0;
    (function(){
         $($sequence[div++]).fadeIn('slow', arguments.callee);
    })();
}); 
</script>
thecodeparadox
  • 81,835
  • 21
  • 131
  • 160
user1385827
  • 315
  • 1
  • 5
  • 23

1 Answers1

0

I haven't used it myself, but you might want to take a peek at the jquery appear plugin.

kinakuta
  • 8,819
  • 1
  • 34
  • 48
  • Hi Kinakuta, this works great, however id love it to loop so that every time the div enters the screen it triggers the function. At the moment it only does it the first time. Im guessing this has something to do with the .hide() Any ideas? – user1385827 Jun 13 '12 at 23:45
  • How do you currently have it wired up? – kinakuta Jun 14 '12 at 04:00
  • ` ` – user1385827 Jun 14 '12 at 06:01