jQuery - Reversing the sequental fade-in plugin

Question

Hello,

I'm wondering if there ar any ways to make this plugin: http://www.thewebsqueeze.com/web-design-tutorials/sequential-fade-in-jquery-plug-in.html showing fade in items at the top?

Thanks a lot!

Answer 1

You can reverse the .each() call by reversing the array order, and a few other optimizations, like this:

(function($) {
$.fn.fadeInSequence = function(fadeInTime, timeBetween) {
    //Default Values
    timeBetween = timeBetween || 0;
    fadeInTime = fadeInTime || 500;

    //The amount of remaining time until the animation is complete.
    //Initially set to the value of the entire animation duration.
    var l = this.length, remainingTime = l * (fadeInTime+timeBetween);

    $.each(this.get().reverse(), function(i) {

        //Wait until previous element has finished fading and timeBetween has elapsed
        $(this).delay(i*(fadeInTime+timeBetween));

        //Decrement remainingTime
        remainingTime -= (fadeInTime+timeBetween);

        if($(this).css('display') == 'none')
        {
            $(this).fadeIn(fadeInTime);
        }
        else //If hidden by other means such as opacity: 0
        {
            $(this).animate({'opacity' : 1}, fadeInTime);
        }

        //Delay until the animation is over to fill up the queue.
        $(this).delay(remainingTime+timeBetween);
    });
    return this;
};

})(jQuery);

Here's a copy the demo page updated to use the backwards version.