Question

我一直试图让一些很酷的列表一次显示一个项目。但是，如果我使用下一个方法做到这一点，它会变得缓慢且滞后。有没有办法顺利地做到这一点？

这里有CodePen的东西和下面的代码：

HTML（emmet）

(.outer>(ul#list$>(li.left>h3{title$})+(li.center>p{some text})+(li.right>p{some other text}))*5)+button#show{SHOAW}

SCSS

$height: 50px;

*{box-sizing:border-box}
body{font-family:sans-serif}

.outer{
  width:100%;


  ul{
    width:100%;
    list-style:none;
    padding:0;
    margin:0;
    height:$height;

    li{
      float:left;
      width: (100%/3);
      background-color: whitesmoke;
      height:$height;
      border-left:solid thin #e1e1e1;
      text-align:center;
      &.center, &.right {
        display:none;
      }
      &:first-child{
        border-left:none;
      }
    }
  }
}

的jQuery

$(document).ready(function() {
    $('#show').click(function() {

      $('.center, .right').first().show('fast', function showNext () {
        $('.outer ul *').next('.center, .right').show('fast', showNext);
      });

    });

});

Answer 1

我已经找到了解决方案！事实证明.next方法不适用于整个事情，因为在第一个列表的末尾，它不能用于下一个。我尝试使用.parent移出并返回for内部，但它会同时打开每个项目。 SetTimeout也没有骰子，因为JavaScript不会等待上一次迭代完成（它会设置所有内容的时间并立即执行所有操作）。

所以解决方案如下（also in CodePen）：

var c=-1; //il counter - c=1, show center; c=-1, show right
var p=1;  //ul counter - c=-1, p++
  $('#show').click( function() {
      $('#list' + p +' li').first().show('fast',   // first of all (list1.ul.center)
          function showNext(){
            c*=-1;        // switch li (right)
            if (c==1) {
              $('#list' + p + ' li').next('ul .center').show('fast', showNext);
            } else {      // c= -1, show .right
              p++;        //next list
              $('#list' + (p-1) + ' li').next('ul .right').show('fast', showNext);
            }
          }
      );
    } 
  );

$('#hide').click( function() {
  $('ul .center, ul .right').hide('fast');
  c=-1; p=1;
});

这个想法是仅使用next移动到当前列表中。然后，如果下一个完成当前操作，则使用变量移动到下一个。

有点（waaaay）比我想象的要复杂得多，但它渲染得非常顺畅。

在不同列表中逐个淡入列表项

HTML（emmet）

SCSS

的jQuery

1 个答案: