Question

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>

Answer 1

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