我将文本放在<p>
标记中,并且脚本应该循环遍历<p>
s,淡出旧文本并淡入新文本。我的问题是所有的<p>
都会立即出现,结果就是:
我该如何解决这个问题?
HTML:
<div id="container">
<p>Hello</p>
<p>World</p>
<p>Lorem</p>
<p>Ipsum</p>
</div>
CSS:
#container{ position:relative; }
#container p{ position:absolute; top:0; left:0; }
JavaScript的:
$('#container p:gt(0)').hide();
setInterval(function () {
$('#container p:first-child').fadeOut('slow')
.next('p').fadeIn('slow')
.end().appendTo('#container');
}, 1000);
答案 0 :(得分:0)
您的代码有效并且不会重现上述效果/错误,但效率不高,您可以缓存对象并使用.eq()
方法,您也可以使用.fadeOut()
的回调函数在动画完成时执行。
var $p = $('#container p'), i = 0;
$p.not(':first').hide();
setInterval(function () {
$p.filter(':visible').fadeOut(function(){
$p.eq( ++i % $p.length ).fadeIn();
});
}, 2000);