jQuery - delay each div in DOM

Question

I'm trying to loop over each DIV in DOM and apply an effect (let's say fadeOut()), with time spaces between each one. From some reason this thing doesn't want to work.

var stupid = -1000;

return_stupid = function(){
return stupid+=1000;
}

$(function(){
    $("div").not("#wrapper").delay(return_stupid()).queue(function(){
        $(this).fadeOut("slow");
        $(this).dequeue();
    });
});

edit: Well, I found the issue. return_stupid() is only called ONCE because it's not a .each() statement.

Well, I don't wanna use each(), it's eating the memory!

Any solution?

score 0 · Answer 1 · answered Feb 17 '13 at 09:01

0

You can use a jQuery plugin as below. It will fade out each matched element between a given interval.

$.fn.fadetraining = function(duration, delay) {
  var $elements = this;
  $elements.length && $elements.first().fadeOut(duration, function(){
    $elements.slice(1).delay(delay).fadetraining(duration);
  });
  return $elements;
};

You can use it like this:

$("div").not("#wrapper").fadetraining("slow", 1000);

You can see it here.

I don't understand why you don't want to use .each(). After all, almost all jQuery function use it internally.

Note: This is a spin-off of a previously written jQuery plugin of mine, $.fn.fadetrain.

answered Feb 17 '13 at 09:01

Alexander

23,432
11
63
73

I don't really know what I don't want to use it. Seems like selecting $("div") is much faster than running each div – Gal Weissman Feb 17 '13 at 09:22
@GalWeissman, either way, I'm afraid you can't apply the animation you want without accessing *each* div individually :) – Alexander Feb 17 '13 at 09:26
Actually, I wanted to trigger the fadeOut for all elements simultaneously, not waiting for another one to finish but execute them all with 100 milliseconds difference from each other – Gal Weissman Feb 17 '13 at 12:43
1

@GalWeissman, if you insist then you already have your answer, you have to use `.each()` – Alexander Feb 17 '13 at 13:01

score -1 · Answer 2 · answered Feb 17 '13 at 08:57

-1

I think you might be using delay wrong. Try something like this:

$(".cell").animate({width:"100px",height:"100px"}, 3000).delay(1000).fadeOut();

I've made a JSFiddle as an example. http://jsfiddle.net/M9n8a/1/

answered Feb 17 '13 at 08:57

turiyag

2,757
2
22
21

jQuery - delay each div in DOM

2 Answers2