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

Fade in/out list of DOM elements one at a time

本文关键字：淡入 淡出 列表 元素 一个 一次 显示 DOM      更新时间：2023-09-26

我有一个网页，里面有一个隐藏的li元素的大列表，我想无休止地循环显示在一个由5个li元素组成的可见小列表上。我目前使用的是一个递归方法，它在每次更新后用下一个li元素调用自己，它可以很好地一次淡出每个可见的li元素。然而，一旦我试图将可见li中的html更改为隐藏li中的html，我就会循环使用所有的shell。所有5个可见的李都设置为前5个隐藏的李，并同时淡出。然后是长时间的暂停，页面冻结一段时间，最终所有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);
        }
    });
}

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

第一种方法

JSFIDDLE最终结果在这里

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

第二次接近，回答您的问题

JSFIDDLE最终结果在这里

查询：

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

对不起，我想我没有完全理解你到底在问什么。希望这能帮助到别人，如果不是你的话。

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

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);
});
相关文章：