文本到文本我如何修复它 [英] Text to text how I fix it

问题描述

我将文字放在< p> 标签中，该脚本应循环显示< p> ，淡出旧文本并淡入新文本。我的问题是，所有< p> 都会立即显示，结果如下：

I put text in <p> tags and the script is supposed to cycle through the <p>s, fading out the old text and fading in the new. My problem is that all the <p>s are shown at once which results in this:

我该如何解决这个问题？

How can I fix this?

HTML：

HTML:

<div id="container">
    <p>Hello</p>
    <p>World</p>
    <p>Lorem</p>
    <p>Ipsum</p>
</div>

CSS：

CSS:

#container{ position:relative; }
#container p{ position:absolute; top:0; left:0; }

JavaScript：

JavaScript:

$('#container p:gt(0)').hide();
setInterval(function () {
    $('#container p:first-child').fadeOut('slow')
        .next('p').fadeIn('slow')
        .end().appendTo('#container');
}, 1000);

小提琴

推荐答案

您的代码有效并且不会重现上述效果/错误，但效率不高，你可以缓存对象并使用 .eq（）方法，你也可以使用 .fadeOut（）' s动画完成时执行的回调函数。

Your code works and doesn't reproduce the mentioned effect/error, but it's not efficient, you can cache the objects and use .eq() method, you can also use the .fadeOut()'s callback function that is executed when animation is complete.

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/

这篇关于文本到文本我如何修复它的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！