fade in page elements from top-to-bottom

Question

What are some good resources for fading in page elements from top to bottom?

I have a Magento project where I have a several flexsliders and some other static elements, and I am interested in trying to fade in the different rows of elements from top to bottom as they load. Presently the static elements load and then the flexslider loads last, making the page loading inelegant.

Does anyone have some suggested plugins or similar resources that I can investigate? I am going to use lazy loading for some of the static images, but that doesn't solve the vertical loading problem. Preferably based on jquery if not javascript straight.

Answer 1

If you're trying to do something like fade in the first row, then the next row, then the next row, and so on, you can use a custom queue:

// Set up your queue of fadeIns:
$(row_selectors).each(function() {
    $(this).queue(
        'fade_in_tans',
        function() {
            $(this).fadeIn().delay(delay_in_ms_if_desired).dequeue('fade_in_trans');
        }
    );
});
// now initiate the first fadeIn:
$(first_row_selector).dequeue('fade_in_tans');