13

jQueryを使用してフェードインおよびフェードアウトしたいH2タグでラップされた2つの引用符があります。ページが読み込まれたら、最初の引用をフェードインし、数秒間遅らせてフェードアウトしてから、次の引用で同じことを行います。私はそれが2つの引用符をループし続けることを望みます。どんな助けでも大歓迎です。

4

2 に答える 2

47

あなたはこのようにそれを行うことができます：

CSS：

.quotes {display: none;}​

HTML：

<h2 class="quotes">first quote</h2>
<h2 class="quotes">second quote</h2>​

Javascript：

// code gets installed at the end of the body (after all other HTML)
(function() {

    var quotes = $(".quotes");
    var quoteIndex = -1;

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

    showNextQuote();

})();​

作業デモ： http： //jsfiddle.net/jfriend00/n4mKw/

このコードは、2つだけでなく、任意の数の引用符に対して機能します。引用符の後にコンテンツがある場合は、引用符が入っているコンテナのサイズを修正して、ある引用符から次の引用符に移動するときにサイズが変更されないようにする必要があります（他のページのコンテンツがジャンプする原因になります） 。

于 2012-08-22T01:45:43.140 に答える
1

これは、上記のスクリプトを機能させるために必要なものです。まず、適切なJQueryフレームワークを参照する必要があるため、このスクリプトタグを<head>セクション内、または<body>タグの最後に、他のすべての要素の後に追加します。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">

次に、メインのJavaScriptを前述の<script>タグの後にロードする必要があります。

<script type="text/javascript">
(function() {

    var quotes = $(".quotes");
    var quoteIndex = -1;

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

    showNextQuote();

})();
</script>
于 2013-10-30T09:10:09.873 に答える