如何使用jquery分别显示/隐藏列表项的时间间隔？

Question

我有这个简单的JavaScript尚未：

$("body").children("div").each(function() { 
    $(this).hide();  
}); 

的目标是：

• 隐藏的各项直接孩子的div（完成:)
• 显示第一直接子格
• 隐藏第一个div ，显示第二个
• 隐藏第二个div，显示第三个等
• 无论何W¯¯很多的div有它
• 时间格保持多久显示的bassed可变

我怎么能这样做？

Answer 1

您可以使用.queue()，.promise()，.delay()，setTimeout()

function toggleCollection(elems, duration, wait) { 
    return elems.queue("toggle", $.map(elems, function(el) { 
     return function(next) { 
     return $(el).delay(duration).toggle(duration).promise().then(function() { 
      $(this).delay(wait /* or duration */).toggle(duration) 
      .promise().then(function() { 
      setTimeout(next, wait) 
      }) 
     }) 
     } 
    })).dequeue("toggle").promise("toggle"); 
} 

toggleCollection($("body > div").hide(), 3000, 1000 * 60 * 60) 
.then(function(elems) { 
    console.log("complete", elems); 
    // toggle collection again 
    // toggleCollection(elems, 3000, 1000 * 60 * 60) 
}); 

Answer 2

您可以轻松地做到这一点，首先使用:gt()选择除第一个孩子所有儿童和隐藏它们。然后在计时器中隐藏可见的孩子并显示下一个孩子请注意，:visible选择可见元素和.next()选择下一个元素。

$(".list > div:gt(0)").hide(); 
 
setInterval(function(){ 
 
    $(".list > div:visible").hide().next().show(); 
 
}, 1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="list"> 
 
    <div>Child 1</div> 
 
    <div>Child 2</div> 
 
    <div>Child 3</div> 
 
    <div>Child 4</div> 
 
    <div>Child 5</div> 
 
    <div>Child 6</div> 
 
    <div>Child 7</div> 
 
</div>