$.each and animation confusion

Question

I am expecting when I go

$.each($(something).find(something), function(){
   $(this).delay(1000).fadeOut();
});

then for each matching element I get a second of delay before it is gone. but what I get is a second of delay and then it all fades out. its 3am and I can't think. please help

score 4 · Accepted Answer · answered Apr 11 '10 at 03:03

4

This will work, call it with a jQuery object as a parameter:

function fadeAll(elems) {
    var i=-1;
    function next() {
        i = i+1;
        if (i < elems.length)
            $(elems[i]).delay(1000).fadeOut(next);
    }
    next();
}

You can see it at work here.

answered Apr 11 '10 at 03:03

interjay

107,303
21
270
254

how would you use this with animate instead of fadeOut? as if you go for example animate({something : 'its value'}, next()); it jumps again right to the end – makeitmorehuman Apr 11 '10 at 03:27
@XGreen: That should say `next` instead of `next()`. – interjay Apr 11 '10 at 03:40

score 1 · Answer 2 · answered Apr 11 '10 at 02:17

1

If I'm interpreting your question right, you want things to fade out over the duration of a second? If so, what you want is $(this).fadeOut(1000);, which sets the duration of a fade; doing the delay(1000) just waits a second before it starts your fadeOut() action.

answered Apr 11 '10 at 02:17

Tim

59,527
19
156
165

Also, this doesn't need to be iterated: this should work `$(something).find(somethingelse).fadeOut(1000)` -- do it all at once (no `each` required) – Michael Haren Apr 11 '10 at 02:20
what i want is delay 1sec -> elem[0] fades out -> delay 1 sec -> elem[1] fades out. – makeitmorehuman Apr 11 '10 at 02:21
now thinking about it each fade out function could be a call back for the fadeout of the prev element but probably it will look like the worst code ever written in history – makeitmorehuman Apr 11 '10 at 02:27
In that case, you want to run animations *sequentially*. refer to this http://stackoverflow.com/questions/1218152/how-can-i-animate-multiple-elements-sequentially-using-jquery – Michael Haren Apr 11 '10 at 02:28
that is not very nice is it? I mean I am dealing with unknown number of elements here and they could be a lot – makeitmorehuman Apr 11 '10 at 02:30
Yeah, you might be looking at making a new plugin for something like this (or searching for one) – Michael Haren Apr 11 '10 at 02:38

Matthew Flaschen · Answer 3 · 2010-04-11T03:09:42.193

1

This should be the basic idea:

var set = $(something).find(something);
var delayFade = function(){
     $(this).delay(1000).fadeOut(400, nextDelayFade);
};
var i = 0;
var nextDelayFade = function()
{
  if(i < set.length)
  {
    $(set[i++]).each(delayFade);
  }
};
nextDelayFade();

edited Apr 11 '10 at 03:09

answered Apr 11 '10 at 02:54

Matthew Flaschen

278,309
50
514
539

$.each and animation confusion

3 Answers3