jQuery.each()

I bypass the elements in this way:

jQuery.each($('#content_wrap > .an_post'), function() {
     setTimeout(function(){console.log('Hello timeout');}, 10000);
});

For example

$('#content_wrap > .an_post').size()

Is equal to 4. Then in theory .each will bypass 4 elements in 40 seconds, but it is triggered after 10 and outputs 4 'Hello timeout' to the console at once. Why is this happening? This plunges me into the depths of despair!

In general, I wanted to do something like this:

jQuery.each($('#content_wrap > .an_post'), function() {
     $(this).fadeIn(1500);
});

That is, so that 4 elements disappear one after the other with a difference in animation of about a second.

Author: Viacheslav Soldatov, 2012-12-02

2 answers

In theory .each will bypass 4 elements in 40 seconds, but it is triggered after 10 and outputs 4 'Hello timeout' to the console at once. Why is this happening?

As you know, setTimeout calls the function passed as a parameter after a certain period of time from the moment of calling setTimeout itself, and since in the loop 4 elements are sorted sooooo fast, the difference between calls is equal to milliseconds, which do not affect the overall picture

To make 4 elements one after the other they disappeared with a difference in animation of about a second

$('#content_wrap > .an_post').each(function(idx){
    $(this).delay(1000*idx).fadeOut(1500);
});
 1
Author: Spectre, 2012-12-02 14:10:45

I wrote it on my knee. The meaning, I think you will understand)

jQuery.each($('#content_wrap > .an_post'), function(id) {
     $(this).delay(1000*id).fadeOut(1500);
});
 2
Author: nolka, 2012-12-02 14:04:13