Question

我有这5个div：

<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秒内，淡出内容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 Timing

轻松完成此操作

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>

JS：

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>

Jquery显示一次循环div并且淡入淡出

2 个答案: