fadein（）和fadeout（）一次显示所有子标签

Question

我有5个span元素，我试图在图像上淡入淡出。如果我在span标记中没有包含子html元素，则以下代码可以正常工作，但如果我在某些元素周围添加p标记，则它不起作用。我添加p标签的原因是我希望文本堆叠在彼此之上而不是内联，因此它适合我试图显示的区域。

如果我添加了p标签，怎样才能让jQuery再次运行？

编辑为了澄清，我只希望一次显示一个范围。在页面加载时，显示第一个跨度，然后当它淡出时，第二个跨度显示，依此类推。我可以在p标签单独淡入和淡出的地方得到它，但宁可将span标签淡化为一个。

以某种方式使用CSS来堆叠文本会更好吗？ （我在CSS方面非常糟糕）

HTML

 <span class="my-text"><p>Some long </p> Text</span>
 <span class="my-text"><p>Some long </p> Text</span>
 <span class="my-text"><p>Some long </p> Text</span>
 <span class="my-text"><p>Some long </p> Text</span>
 <span class="my-text"><p>Some long </p> Text that goes <p>farther</p></span>

的jQuery

jQuery(document).ready(function() { 
var quoteIndex = -1,
quotes = jQuery('.my-text');

function showNextQuote() {
    ++quoteIndex;
    quotes.eq(quoteIndex % quotes.length)
        .fadeIn(2000)
        .delay(2000)
        .fadeOut(2000, showNextQuote);
}
showNextQuote();
});

Answer 1

您不应将块级元素（p）放在内联元素（span）中 - 这是无效的。

请改为尝试 - DEMO

的 HTML 的

<div class="my-text"><p>Some long </p> Text 1</div>

的的jQuery 的

jQuery(document).ready(function() {
    var quoteIndex = -1,
    quotes = jQuery('.my-text');

    jQuery(".my-text:gt(0)").hide();    

    function showNextQuote() {
        ++quoteIndex;
        quotes.eq(quoteIndex % quotes.length)
            .fadeIn(2000)
            .delay(2000)
            .fadeOut(2000, showNextQuote);
    }
    showNextQuote();
});