Question

I have 5 span elements that I am trying to fade in and out on top of an image. The following code works fine if I have no child html elements included in the span tag, but if I add p tags around some of the elements, it doesn’t work. The reason I am adding p tags is I would like the text stacked on top of each other instead of inline so it fits in the area I am trying to display on.

How can I make the jQuery work again now that I have added the p tags?

EDIT To clarify, I only want one span to show at a time. On page load, first span shows, then when it fades out, the second span shows up, and so on. I can get it where the p tags fade in and out individually, but would rather the span tag fade as one.

Would it be better to use CSS somehow to stack the text? (I am very bad at 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

You should not put block level elements (p) inside inline ones (span) – that’s invalid.

Try this instead – 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();
});