1ST APPROACH

Question

我有一个网页，其中包含大量隐藏的li元素，我想无休止地循环显示在5个li元素的小型可见列表中。我目前正在使用递归方法，在每次更新后使用下一个li元素调用自身，这可以很好地一次淡入/淡出每个可见的li元素。然而，一旦我尝试将可见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);
        }
    });
}

Answer 1

仅从1个LI's元素循环<UL>，并从2个<LI>元素循环<UL>标记，使用第一个UL作为可见UL和第二个UL作为looper UL

1ST APPROACH

JSFIDDLE FINAL RESULT HERE

淡入，只有在淡出完成后才会淡入。并且使用class隐藏除了第一个li之外的所有li元素，并且不需要将curItem参数发送到该函数，这只会弄乱，只需发送.next或{ {1}}元素代替函数。而且无需使用:first，.length > 0就足够了。

.length

HTML：

$(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"));
            });
        }
    });
}

第二种方法，回答你的问题！

JSFIDDLE FINAL RESULT HERE

JQUERY：

<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>

HTML结构：

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));
        });
    });
}

CSS：

<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>

对不起，我想我并不完全明白你的要求。好吧，希望这有助于某人，如果不是你。

Answer 2

在这里，我认为这就是你要找的东西。它可以根据您的需要进行更改，但这是最基本的工作。

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);
});

一次淡入/淡出DOM元素列表

2 个答案:

1ST APPROACH

第二种方法，回答你的问题！