CODEWITHSUNDEEP
javascriptjquerycss
amit
amit

Reputation: 10261

Jquery animation not obeying delay()

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?

Upvotes: 1

Views: 127

Answers (5)

Samich
Samich

Reputation: 30095

To animate items one by one you need to set different delay for each article:

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

Update

Probably you are looking for somethign like this: 

$(".classname").click(function(){
    $(".classname").each(function(index, item){
        $(this).delay(index * 100).animate({ "left" : "-1000px", opacity: "0" }, 500)
    })
})

http://jsfiddle.net/L3YS3/1/

Upvotes: 1

SLaks
SLaks

Reputation: 887215

delay() appends a delay to the queue.
You need to put in the delay before the animation, not after it.

Upvotes: 0

Wouter J
Wouter J

Reputation: 41934

First call .delay() and then the animate function:

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

A very simple example: http://jsfiddle.net/EzMzy/

Upvotes: 0

Rick Kuipers
Rick Kuipers

Reputation: 6617

You should call your .delay() before the .animate():

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

Upvotes: 0

Rich O&#39;Kelly
Rich O&#39;Kelly

Reputation: 41757

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" });

Upvotes: 3

Related Questions