2

我有 5 个跨度元素，我试图在图像顶部淡入和淡出。如果我没有包含在 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();
});
4

1 回答 1

2

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

试试这个 -演示

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();
});
于 2012-11-02T16:06:58.857 回答