jquery - Reverse the order of animation with jQuery

Question

I am using jQuery to fade in a group of list items, at the moment it is fading from top to bottom; I would like to fade in from the bottom upwards. The function is fired when the bottom most list item is visible in the browser.

An example is here.

Due to constraints I can't simply flip the lists order around, is this possible?

I have read about a possible

.reverse() 

option, but haven't found a way to implement it.

Thanks in advance.

Answer 1

Replace your following code:

$(".chart.electric li, .chart.fuel li").each(function (index)

for this one:

$( $(".chart.electric li, .chart.fuel li").get().reverse() ).each(function (index) {

See working demo

Answer 2

try this .. adding reverse to your each

http://jsfiddle.net/HxFfH/12/

    jQuery.fn.reverse = [].reverse;

    $(".chart.electric li, .chart.fuel li").reverse().each(function (index,el) {
        $(el).delay(100 * index).animate({opacity: 1}, 1000);
    });