Question

I have a set of <li> in which I have a couple <article> elements.
When I click on any <article> I want all of them to slide out of view one by one.

HTML is:

<li>
  <article class="classname">
  <article class="classname">
</li>
<li>..</li>
<li>..</li>
<li>..</li>

the jquery function i was writing was:

$(".classname").click(function(){

        $(this).parent().parent().find('li').each(function(index, item){
            $(item).children().animate({ "left" : "-1000px" }).delay(2000);

        })
    })

the issue is when i click on any article element, all the elements slide out of view at once. Not one by one as I desire. What could be the issue?

Answer 1

The delay function delays execution of subsequent items in the queue: you need the delay before the animate call with a staggered duration:

$(item).children().delay(index * 2000).animate({ "left" : "-1000px" });