Jquery一次在循环中显示div，然后淡出。

Question

我有这5块硬币：

<div id="content-1"></div>
<div id="content-2"></div>
<div id="content-3"></div>
<div id="content-4"></div>
<div id="content-5"></div>

我想要做的是，从显示第一个div开始，30秒后，淡出这个div和内容-2，在30秒内和30秒之后，淡出内容-2和内容-3，等等，当它到达结束时，从1开始。

这就是我所开始的，现在内容-1将开始，5秒后它将消失和内容2将出现，只是有一个更好的方法，没有办法知道什么时候达到4，并开始再次1。

$('#content-1').show(0).delay(5000).hide(0);
$('#content-2').hide(0).delay(5000).show(0);

我希望这是有意义的，任何帮助都将不胜感激。

谢谢,

Answer 1

您可以通过Jquery定时轻松地完成这一任务。

HTML：

<div id="content-1" class="content"></div>
<div id="content-2" class="content"></div>
<div id="content-3" class="content"></div>
<div id="content-4" class="content"></div>
<div id="content-5" class="content"></div>

联署材料：

var divs = $('.content').hide();
divs.each($).fadeIn(1000).not(divs.last()).delay(5000).fadeOut(1000,$);

Answer 2

这不是最有效的方法，但它很有效，而且很容易理解。这段代码将循环通过一组元素，使它们一次一次地进入或退出。

​

<script>
$(document).ready(function() {

	var timer = setInterval( showDiv, 5000);
	var start = $('.slideshow > img').first();

	function showDiv() {
		start.fadeOut(function(){ 
			if(start.next().length==0) {
				start=$('.slideshow > img').first();
				$('.slideshow > img').first().fadeIn(); 	
			} else {
				start.next().fadeIn();
				start=start.next();
			}
		});
	}
});
</script>

<style>
.slideshow img { display: none; }
</style>

<div class="slideshow">
  <img class="slides1" src="slide_1.jpg" alt="" style="display: block;" />
  <img class="slides2" src="slide_2.jpg" alt="" />
  <img class="slides3" src="slide_3.jpg" alt="" />
  <img class="slides4" src="slide_4.jpg" alt="" />
</div>

​