1

非表示の li 要素の大きなリストを含む Web ページを持っています。これを無限にループして、5 つの li 要素の小さな可視リストに表示したいと考えています。私は現在、各更新後に次のli要素で自分自身を呼び出す再帰的なメソッドを使用しています。これは、表示されている各liを一度に1つずつ永遠にフェードイン/アウトするのにうまく機能します。ただし、表示されている li の html を非表示の li の html に変更しようとすると、すべての地獄が壊れてループします。表示されている 5 つの Li はすべて、最初の 5 つの非表示の Li に設定され、一度にフェードイン/フェードアウトします。その後、長い一時停止があり、ページが少しフリーズし、最終的にすべての 5 つの表示された Li が再びフェード イン/アウトし、最初の 5 つの非表示の Li に設定されたままになります。html を変更しようとすると、突然全体のループが一度に発生し、変更できます。

$(function () {
    fade($("#all-donors").first(), 1);           
});

function fade(elem, curItem) {
    var curElement = $("#donor" + curItem);
    //curElement.html(elem.html());  //This line breaks it
    curElement.fadeOut(1000).fadeIn(1000, function () {
        curItem++;
        if (curItem > 5) {
            curItem = 1;
        }

        // If we're not on the last <li>
        if (elem.next().length > 0) {
            // Call fade on the next <li>
            fade(elem.next(), curItem);
        }
        else {
            // Else go back to the start
            fade(elem.siblings(':first'), curItem);
        }
    });
}
4

2 に答える 2

2

最初のULLI'sを<UL>可視UL として使用し、2 番目の UL<LI>を<UL>looper UL

最初のアプローチ

JSFIDDLE 最終結果はこちら

フェードアウトが完了した後にのみ、フェードインします。またclass、最初の li 以外のすべての li 要素を最初に非表示にするために使用し、curItemパラメーターを関数に送信する必要はありません。これは混乱を招くだけであり、代わりに.nextor要素を関数に送信するだけです。:firstを使用する必要はなく.length > 0、.length十分です。

$(document).ready(function() {
    myFunc($(".show"));
});

function myFunc(oEle)
{
    oEle.fadeOut('slow', function(){
        if (oEle.next().length)
        {
            oEle.next().fadeIn('slow', function(){
                myFunc(oEle.next());
            });
        }
        else
        {
            oEle.siblings(":first").fadeIn('slow', function(){
                myFunc(oEle.siblings(":first"));
            });
        }
    });
}

HTML:

<ul class="listitem">
    <li class="show">Test 1</li>
    <li class="hidden">Test 2</li>
    <li class="hidden">Test 3</li>
    <li class="hidden">Test 4</li>
</ul>

2 番目のアプローチ、そしてあなたの質問に答えます!

JSFIDDLE 最終結果はこちら

jQuery:

var curIndex = 0, 
    nextIndex = 0;

$(document).ready(function() {
    myFunc($(".show").children().eq(curIndex), $(".hidden").children().eq(nextIndex));
});

function myFunc(curLI, nextLI)
{
    curLI.fadeOut('slow', function(){
        $(this).html(nextLI.html()).fadeIn('slow', function() {
            curIndex = curLI.next().length ? ++curIndex : 0;
            nextIndex = nextLI.next().length ? ++nextIndex : 0;
            myFunc($(".show").children("li").eq(curIndex), $(".hidden").children("li").eq(nextIndex));
        });
    });
}

HTML 構造:

<ul class="listitem show">
    <li>Blah 1</li>
    <li>Blah 2</li>
    <li>Blah 3</li>
    <li>Blah 4</li>
    <li>Blah 5</li>
</ul>
<ul class="listitem hidden">
    <li>Test 1</li>
    <li>Test 2</li>
    <li>Test 3</li>
    <li>Test 4</li>
    <li>Test 5</li>
    <li>Test 6</li>
    <li>Test 7</li>
    <li>Test 8</li>
    <li>Test 9</li>
    <li>Test 10</li>
    <li>Test 11</li>
    <li>Test 12</li>
    <li>Test 13</li>
    <li>Test 14</li>
</ul>

CSS:

.listitem {
    list-style-type: none;
    list-style: none;
}
ul.hidden li {
    display: none;
}

申し訳ありませんが、私はあなたが何を求めているのかを完全には理解していなかったと思います. うまくいけば、これはあなたではないにしても、誰かを助けるでしょう.

于 2013-08-09T14:57:15.627 に答える
0

ここで、これがあなたが探しているものだと思います。必要に応じて変更できますが、基本的には機能しています。

JSFiddle (更新) : http://jsfiddle.net/Ut86V/4/

HTML:

<ul class="list1">

  <li>blahxx</li>
  <li>blahxxx</li>
  <li>blahxxxx</li>
  <li>blahxxxxx</li>
  <li>blahxxxxxx</li>
</ul>


<ul class="list2">
  <li>blah1</li>
  <li>blah2</li>
  <li>blah3</li>
  <li>blah4</li>
  <li>blah5</li>
  <li>blah6</li>
  <li>blah7</li>
  <li>blah8</li>
  <li>blah9</li>
  <li>blah0</li>
  <li>blah11</li>
  <li>blah12</li>
  <li>blah13</li>
  <li>blah14</li>
  <li>blah15</li>
  <li>....</li>
</ul>

Javascript:

function popList( speed ) {

    speed = speed || 2000;
    var $list1 = $('.list1 li');
    var $list2 = $('.list2 li');
    var item = 0;
    var source = 0;

    for( i=0; i<5; i++ ) {

        $list1.eq( i ).html( $list2.eq( i ).html() );
        source = i+1;

    }

    var replaceContent = function() {           

        $list1
            .eq( item )
            .delay( speed/2 )
            .animate(
                { opacity: 0 }, 
                speed/4, 
                function() {

                    var content = $list2.eq( source ).html();

                    $(this)
                        .html( content )
                        .animate(
                            { opacity: 1 }, 
                            speed/4 
                        );

                    item = ( item >= 4 ) ? 0 : item+1;
                    source = ( source >= $list2.length-1 ) ? 0 : source+1;

                    replaceContent();

                }
            );           

    };

    replaceContent();


};

$(function() {
    popList(5000);
});
于 2013-08-09T15:14:04.307 に答える