2

画像の上でフェードインおよびフェードアウトしようとしている 5 つのスパン要素があります。次のコードは、span タグに子 html 要素が含まれていない場合は正常に機能しますが、いくつかの要素の周りに p タグを追加すると機能しません。p タグを追加する理由は、表示しようとしている領域に収まるように、テキストをインラインではなく重ねて表示したいからです。

p タグを追加したので、jQuery を再び機能させるにはどうすればよいですか?

EDIT明確にするために、一度に表示するスパンは 1 つだけにしたいのです。ページの読み込み時に最初のスパンが表示され、フェードアウトすると 2 番目のスパンが表示されます。p タグが個別にフェードインおよびフェードアウトする場所を取得できますが、span タグが 1 つとしてフェードアウトすることをお勧めします。

どういうわけか 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 に答える