我想fadeOut集合中的第一个div然后淡入下一个div。淡出将在设定的时间触发。集合中的项目数为1到n。这是html的一个例子;
<div class="contentPanel">
<div class="content">
<div style="border: solid 2px black; text-align: center">
This is first content
</div>
</div>
<div class="content">
<div style="border: solid 2px black; text-align: center">
This is second content
</div>
</div>
<div class="content">
<div style="border: solid 2px black; text-align: center">
This is third content
</div>
</div>
</div>
因此在页面加载时,第一个“内容”类将是可见的,在x时间后,当前“内容”将淡出,下一个“内容”将淡入。当它到达第n个“内容”时将重新开始,淡出第n个“内容”并淡出第一个“内容”。这种行为会不断循环。
答案 0 :(得分:10)
你可以做一些非常紧凑的事情:
function fadeContent() {
$(".content:hidden:first").fadeIn(500).delay(2000).fadeOut(500, function() {
$(this).appendTo($(this).parent()); //stick current at the end
fadeContent(); //loop
});
}
fadeContent(); //kick it off the first time
You can see a working example with your exact markup here。这会使第一个元素在500毫秒内消失,离开2000毫秒,淡出500毫秒,将元素放在列表的末尾,然后淡入列表中的第一个元素,冲洗,重复。你需要的唯一补充是CSS最初隐藏所有这些,如下所示:
.contentPanel .content { display: none; }
答案 1 :(得分:1)
尝试使用Cycle Plugin:
$('.contentPanel').cycle();