How to flip index of jquery's each?

Question

Possible Duplicate:
JQuery .each() backwards

I am using this code to show each div -> this with a delay an an animation:

$.fn.slideDelay = function(){
    var delay = 0;
    return this.each(function(){
        $(this).delay(delay).animate({
            opacity: 1,
            top: 0
        }, 2000);
        delay += 1000;
    });
};

Works well so far... the only Problem i got is that i need to start with the last index not the first one. Which means the last div gets animated first then the beforelast and so on until the first one.

VisioN · Accepted Answer · 2012-10-12T10:05:52.240

1

Theoretically the following should work:

$.fn.slideDelay = function() {
    var len = this.length,
        delay = (len - 1) * 1000;

    return this.each(function() {
        $(this).delay(delay).animate({
            opacity: 1,
            top: 0
        }, 2000);
        delay -= 1000;
    });
};

DEMO: http://jsfiddle.net/q4cGP/

edited Oct 12 '12 at 10:05

answered Oct 12 '12 at 09:58

VisioN

143,310
32
282
281

To reverse the delays of three elements (`0 - 1000 - 2000`), I think you'd have to start with `(len - 1) * 1000`. Currently, in case of 3 elements you start with 3000. – pimvdb Oct 12 '12 at 10:04
@pimvdb Yes, you're right. I forgot about the indexing. Now it should be fine. Thanks! :) – VisioN Oct 12 '12 at 10:08

score 1 · Answer 2 · answered Oct 12 '12 at 09:58

1

You could reverse the collection...

collection = Array.prototype.reverse.call(collection);

jsFiddle.

answered Oct 12 '12 at 09:58

alex

479,566
201
878
984

score 1 · Answer 3 · answered Oct 12 '12 at 09:59

1

Just retrieve the array from your jQuery object and reverse it:

var items = jQuery(this).get();
items.reverse();
jQuery.each(items, function() {.....

answered Oct 12 '12 at 09:59

stlvc

833
5
16

score 0 · Answer 4 · answered Oct 12 '12 at 10:00

Map the delay with a function like this:

$.fn.slideDelay = function(){
    var max = this.length - 1;
    return this.each(function(i){
        $(this).delay((max - i) * 1000).animate({
            opacity: 1,
            top: 0
        }, 2000);
    });
};

How to flip index of jquery's each?

4 Answers4