【问题标题】:Slide down a set of hidden <li> s one at a time一次向下滑动一组隐藏的 <li>
【发布时间】:2011-11-29 15:21:03
【问题描述】:

我想在单击按钮时一次滑下一些 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>

【问题讨论】:

    标签: jquery slidedown


    【解决方案1】:

    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/

    【讨论】:

      【解决方案2】:

      看看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 毫秒,因为那是动画的时间。这些值应该保持不变才能获得连续的动画效果。

      【讨论】:

      • 会的;只需将超时时间设置为小于 500 毫秒。例如,将其设置为 250 会使下一个 li 向下滑动到前一个 li 动画的一半。示例here (100ms)。
      【解决方案3】:
      $("#dropdown h1").click( function() {
          var sliderTimer=300;
          $("li").each(function()
                       {
                        $(this).slideDown(sliderTimer);
                           sliderTimer+=300;
                       });
      } );
      

      Live demo

      【讨论】:

        猜你喜欢
        • 2012-03-24
        • 1970-01-01
        • 1970-01-01
        • 2019-06-14
        • 1970-01-01
        • 2017-01-31
        • 1970-01-01
        • 1970-01-01
        • 2018-06-29
        相关资源
        最近更新 更多