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

Posted 2023-02-25

【中文标题】在不同列表中一次淡入一个列表项

【英文标题】：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>h3title$)+(li.center>psome text)+(li.right>psome other text))*5)+button#showSHOAW

SCSS

$height: 50px;

*box-sizing:border-box
bodyfont-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()

谢谢，伙计们！我和一个朋友一起解决了这个问题，但我彻底测试了你的想法。不过，可能超出了我的想象。

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