一次向下滑动一组隐藏的<li>一个</li>

时间:2011-11-29 15:21:03

标签: jquery slidedown

我想点击一个按钮一次滑下一个li。

我嘲笑我目前拥有的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>

3 个答案:

答案 0 :(得分:9)

slideDown()函数有第二个参数,它是动画结束时执行的回调函数。只需使用该功能滑动下一个:

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

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

工作演示:http://jsfiddle.net/S5T7N/6/

答案 1 :(得分:3)

查看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);
    });
} )

循环遍历每个li并设置超时,等待每个li的不同时间。它目前设置为500毫秒,因为这是动画的时间。这些值应保持不变,以获得连续观看的动画。

答案 2 :(得分:0)

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

<强> Live demo