文字到文字我如何解决它

时间:2013-10-08 11:42:24

标签: javascript jquery html css

我将文本放在<p>标记中,并且脚本应该循环遍历<p> s,淡出旧文本并淡入新文本。我的问题是所有的<p>都会立即出现,结果就是:

enter image description here

我该如何解决这个问题?

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);

Fiddle

1 个答案:

答案 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);

http://jsfiddle.net/dAvcV/