Javascript 一次一个DOM元素的淡入/淡出列表

我有一个包含大量隐藏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);
        }
    });
}

$（函数（）{
褪色（$（“#所有捐赠者”）.first（），1）；
});
功能衰减（元素、曲线）{
var curElement=$（“#捐赠者”+curItem）；
//curElement.html（elem.html（））；//此行将打断它
curElement.fadeOut（1000）.fadeIn（1000，函数（）{
curItem++；
如果（curItem>5）{
curItem=1；
}
//如果我们不是最后一个

if（elem.next（）.length>0）{
//在下一个

淡入淡出（elem.next（），curItem）；
}
否则{
//否则就回到起点
淡入（元素同级（':first'），curItem）；
}
});
}

仅从1个

元素循环
LI的
，并从2个
元素循环
标记，使用第一个UL作为可见UL，第二个UL作为
循环器UL

第一种方法

淡入，仅在淡出完成后。并使用
class
隐藏除第一个li之外的所有li元素，无需将
curItem
参数发送到函数，这只会把事情搞砸，只需将
发送到函数。下一个
或
：第一个
元素即可。而且不需要使用
.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:

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>

对不起，我想我没有完全理解你到底想要什么。嗯，希望这能帮助别人，如果不是你的话。
在这里，我想这就是你想要的。
它可以根据您的需要进行更改，但这是最基本的工作

JSFIDLE（更新）：

HTML:


布拉赫
布拉赫XXX
布拉赫XXXX
布拉赫XXXXX
blahxxxxxx


胡说八道
废话
废话
废话
布拉赫
废话
废话
废话
废话
废话
废话11
废话12
废话13
废话14
胡扯15



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

功能popList（速度）{
速度=速度| | 2000；
变量$list1=$（'.list1 li'）；
变量$list2=$（'.list2 li'）；
var项=0；
var源=0；
对于（i=0；i=4）？0：项目+1；
source=（source>=$list2.length-1）？0:source+1；
替换内容（）；
}
);           
};
替换内容（）；
};
$（函数（）{
popList（5000人）；
});
fadeIn（）是异步的。这就是为什么你觉得他们都在一起。您最好使用fadeIn（）的回调来转到下一项。这不是我真正要做的。我用来显示隐藏li元素的大列表的5个li元素应该都是可见的，我只是在它们之间循环，以显示下一个文本中的隐藏，下一个文本中的可见；因此，一次遍历两个列表。根据您的代码，在调用fadeIn（）之前，我尝试向fadeOut（）添加回调，并将下一个可见li的html更改为其中下一个隐藏li的html，但仍然遇到相同的问题：（@Fenoec-用更好的代码为您更新了我的答案，IMO！并且不使用计时器。使用第二种方法，我相信这正是您所追求的：jsfiddle关于这一点：完美，非常感谢。我将其更改为我接受的答案，因为它似乎也解决了一个异步问题，即有时我会跳过其他答案中的元素。干杯！太好了，很高兴能帮上忙。啊，非常感谢你，这正是我一直在寻找的东西，现在它开始工作了！我会投票支持你，但没有足够的代表：（这个解决方案实际上遇到了一个异步问题，每隔一段时间就跳过一个元素，所以我接受了另一个答案。仍然对此进行了升级，因为它对其他人很有帮助。很抱歉听到这个消息，Fenoec。为了帮助其他人，希望你，我对它进行了一些修改。我仍然感觉到我编写的代码很有用写的很简洁，但是我把它改成了一个无限自调用函数。请看我上面编辑的答案。Simey。
<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>

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

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

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