CODEWITHSUNDEEP
javascriptjqueryjquery-animate
user3255543
user3255543

Reputation: 33

jquery Animate each list item

I have this list and i want to animate through each list item, basically have a cascading effect of each item moving a few centimeters upwards.

I have created this code in order to achieve this but it seems it's animating through the whole list rather than individual list item.

JS - jquery

$("#energy_guide ul").animate({"top" : "+=20px"}, "fast");

and the HTML 

<ul class="guide-block-list us-list" id="energy_guide">
    <li>
        <a href="#">Item 1</a>
    </li>

    <li>
        <a href="#">Item 2</a>
    </li>
</ul>

Do you guys have any advice regarding how can i achieve this?

Thanks

Upvotes: 1

Views: 2094

Answers (1)

CRABOLO
CRABOLO

Reputation: 8793

This code will do what you want.

var delay_time = 0;
$("#energy_guide ul li").each(function() {
    $(this).delay(delay_time).animate({"top" : "+=20px"}, "fast");
    delay_time += 200;
});

It loops through each of the li's. The first li will have a delay of 0, the second a delay of 200 milliseconds, the third a delay of 400 milliseconds and so on. So it will animate them at different times, right after each other. Feel free to change the delay times and increment from 200 to something else if you want it to go quicker/slower.

Upvotes: 2

Related Questions