CODEWITHSUNDEEP
jqueryslidedown
Infra Stank
Infra Stank

Reputation: 816

Slide down a set of hidden <li> s one at a time

I would like to slide down some li's one at a time on clicking a button .

I mocked up a little fiddle with what I currently have http://jsfiddle.net/S5T7N/ .

 <div id="dropdown">


    <h1>when you click here</h1>

    <ul>
    <li>We</li>
    <li>Will</li>
    <li>Slide Down</li>
    <li>One At A Time</li>
    </ul>
  </div>

Upvotes: 3

Views: 4740

Answers (3)

Baz1nga
Baz1nga

Reputation: 15579

$("#dropdown h1").click( function() {
    var sliderTimer=300;
    $("li").each(function()
                 {
                  $(this).slideDown(sliderTimer);
                     sliderTimer+=300;
                 });
} );

Live demo

Upvotes: 0

wsanville
wsanville

Reputation: 37516

The slideDown() function has a second argument, which is a callback function to execute when the animation finishes. Just use that function to slide the next one:

var slide = function(who)
{
    who.slideDown('slow', function(){
       var next = $(this).next('li');
       if (next)
           slide(next);
    });
}

$("#dropdown h1").click( function() {
    slide($('li:first'));
})

Working demo: http://jsfiddle.net/S5T7N/6/

Upvotes: 9

Bojangles
Bojangles

Reputation: 101473

Have a look at this JSFiddle.

$("#dropdown h1").click( function() {
    var lis = $(this).next('ul').find('li');

    $(lis).each(function(index) {
        var li = $(this);

        setTimeout(function() {
            li.slideDown(500);
        }, 500 * index);
    });
} )

This loops through each li and sets a timeout that waits for a different time for each li. It's currently set to 500ms, as that's the time of the animation. These values should stay the same to get a continuous looking animation.

Upvotes: 3

Related Questions