Question

css

.item {
  display: none;
}

html

<div>
  <div class="item">machin</div>
  <div class="item">chose</div>
  <div class="item">chouette</div>
  <div class="item">prout</div>
</div>

I’m using jQuery and I’d like to make each .item appearing after a random little timer like:

javascript

$('.item').each(function () {
  itm = $(this);
  setTimeout(function () {
    itm.fadeIn(1000);
  }, Math.floor(Math.random() * 1000));
})

Here itm will always contain the last item because the function is evaluated after all assignments.
I can’t use the 3rd parameter of setTimeout() because it will not work on IE.
It’s not advised to use setTimeout() with the eval method for security reasons.

So how can I access to my object through setTimeout() ?

---

Edit

I know that this question have already been posted.
But I though that it were slightly specific with the each() context.
Now someone have entirely changed the title of my question that was originally something like ‘setTimeout() – jQuery.each() this object parameter’

Answer 1

Do not use setTimeout, use jQuery own tools.

$('.item').each(function () {
   $(this).delay(Math.random() * 1000).fadeIn();
})

http://api.jquery.com/delay/

Working example: http://jsfiddle.net/qENhd/