1

私はjQueryとスタックオーバーフローが初めてなので、具体的にしようと思いますが、ご容赦ください。モジュラスを使用してリストを反復処理し、リンクを関連付けたテキスト スライダーをゼロから作成しようとしています。

ここに私が取り組んでいるコードがあります:

ul#text { position: relative; margin-bottom: 40px; height: 40px; }
ul#text li { position: absolute; display: none; }
.active { font-weight: bold; }

<ul id="text">
<li id="textBody">Suffering is not a result of physical pain alone. It can be compounded by changes in one's life, and changes in the self. <em>We understand, and we can help.</em></li>
<li id="textFamily">Aggressive assessment of physical symptoms &amp; pain in the body are key to support <em>the best possible quality of life</em>.</li>
<li id="textFunction">Chronic pain &amp; illness may affect your role in your family. We work with you and your family as you confront those changes.</li>
<li id="textPsyche">Chronic pain and illness make even everyday activities challenging. We will help you maintain independence and physical function.</li>
<li id="textSuffering">Changes in the physical body mean changes in the self. We will provide support as you navigate those changes in the psyche.</li>
</ul>
<ul id="vivid_buttons">
<li><a href="#" id="buttonBody">BODY</a></li>
<li><a href="#" id="buttonFamily" class="active">FAMILY</a></li>
<li><a href="#" id="buttonFunction">FUNCTION</a></li>
<li><a href="#" id="buttonPsyche">PSYCHE</a></li>
<li><a href="#" id="buttonSuffering">SUFFERING</a></li>
</ul>

$(document).ready(function () {

    function fadeAndMove() {
        var nextLi = $("#text > li:nth-child(" + i % 5 + ")");
        var nextA = $("#vivid_buttons > li:nth-child(" + i % 5 + ") > a");
        nextLi.fadeIn(1000, function () {
            $("#vivid_buttons > li > a").removeClass("active");
            nextA.addClass("active");
            setTimeout(function () {
                nextLi.fadeOut(1000);
            }, 4000);
        });
    }

    for (i = 1; i < 7; i++) {
        fadeAndMove($("#text"));
    }
});

簡単な言葉で言えば、最初のリストから文をフェードインし、一番下のリストで対応するリンクを強調表示したいと思います。次に、フェードアウトして次のアイテムに移動します。

モジュラス (%) と for ループを使用して反復し、無限ループを作成できると思ったのですが、これを入れると、項目ごとに反復 (フェードインとフェードアウト) するのではなく、すべてを一度に実行するようになります。

これが紛らわしいことは承知していますが、私が得られる助けをいただければ幸いです。

4

3 に答える 3

3

ループを取り除きfor、setTimeout に関数を呼び出してfadeAndMove()、現在のインデックスを渡します。

例: http://jsfiddle.net/drWhE/

$(document).ready(function () {

       // cache the LI elements
    var $lis = $("#text > li");
    var $aLis = $("#vivid_buttons > li");

    function fadeAndMove( currentIndex ) {
        var nextIndex = (currentIndex + 1) % 5;
        var nextLi = $lis.eq( nextIndex );
        nextLi.fadeIn(1000, function () {
            $aLis.eq( currentIndex ).children('a').removeClass("active");
            $aLis.eq( nextIndex ).children('a').addClass("active");
            setTimeout(function () {
                nextLi.fadeOut(1000, function() {
                      // Call fadeAndMove() passing nextIndex as the new currentIndex
                    fadeAndMove( nextIndex );
                });
            }, 4000);
        });
    }
       // Get it started on index 0
    fadeAndMove( 0 );
});
于 2010-10-08T20:08:53.620 に答える
0

探しているものを取得する方法の 1 つを次に示します。

var $sentence_set = $('ul#text > li');
var $link_set = $('ul#vivid_buttons > li');

var highlight = function(which) {
  var el = $sentence_set.eq(which - 1);
  var position = el.prevAll('li').length;
  $link_set.removeClass('active').eq(position).addClass('active');
  $sentence_set.eq(position).siblings().fadeOut().end().fadeIn();
}

var loopcount = 0;
var repeater = setInterval(function() {
  var theList = $('#text > li');
  highlight(++loopcount % $sentence_set.length);
}, 4000);​

これがフィドルです。

そして... オレンジ色のバーは、patrick dw が私に似たようなことをしたことを示しています。まあ、とにかくここです。

于 2010-10-08T20:44:48.617 に答える
0

フェードアウト タイマーが 4 秒間待機している間もメイン ループが実行され続けるため、すべてが一度にアニメーション化されます。

概略的には、次のようになります (各行は 1 秒を表します)。

li1.fadeIn
li2.fadeIn  |
li3.fadeIn  | |
li4.fadeIn  | | |      Timers
li5.fadeIn  V | | |    wait four
li1.fadeOut   V | | |  seconds
li2.fadeOut     V | |
li3.fadeOut       V |
li4.fadeOut         V
li5.fadeOut
li1.fadeIn
li2.fadeIn
.
.
.
etc, etc, ad nauseam.

fadeAndMove()この問題を解決するには、遅延関数で現在の項目をフェードアウトした直後に次の呼び出しをチェーンする必要があります。

nextLi.fadeIn(1000, function () {
    $("#vivid_buttons > li > a").removeClass("active");
    nextA.addClass("active");
    setTimeout(function () {
        nextLi.fadeOut(1000);
        fadeAndMove(i + 1);
    }, 4000);
});

(これは遅延呼び出しであるため、再帰的ではありません。無限ループによってスタックが破壊されることはありません。)

于 2010-10-08T20:12:29.500 に答える