在不同列表中一次淡入一个列表项答案

【问题标题】：Fade in list items one at a time in different lists在不同列表中一次淡入一个列表项
【发布时间】：2014-05-27 03:57:55
【问题描述】：

我一直在尝试制作一组很酷的列表，一次显示一个项目。但是，如果我使用下一种方法这样做，它就会变得缓慢而滞后。有没有办法顺利做到这一点？

这是 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);
      });

    });

});

【问题讨论】：

这听起来很奇怪但很准确 - codepen.io/anon/pen/BAkah - 它在某个地方出现了错误 - 但我现在没有时间修复它 - 也许你会有更好的运气！ :D 将其视为提示！ :)
你试过 $($(SELECTOR).nextAll(SELECTOR)[0]) 或 $(SELECTOR).nextAll().first()
谢谢，伙计们！我和一个朋友一起解决了这个问题，但我彻底测试了你的想法。不过，可能超出了我的想象。

标签： jquery next

【解决方案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），但它渲染得非常流畅。

【讨论】：