$.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

Answer 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.

Answer 2

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();

Answer 3

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.