Question

我正在尝试使用jQuery创建一系列事件，但我失败了。

我有许多列表，每个列表中都有许多列表项。我想要实现的事件列表如下：

淡入列表1＆gt; Animate List 1 item 1＆gt; Animate List 1 item 2等...... 淡出清单1 淡入列表2＆gt; Animate List 2 item 1＆gt; Animate List 2 item 2等...... 淡出清单2等...

然后这会一遍又一遍地循环。

我目前的jQuery如下：

$('ul').each(function() {
    $(this).children().each(function(i) {
        $(this).delay((i++) * 2000).animate({left:0, opacity:1});
    });
});

我已经创建了一个jsfiddle http://jsfiddle.net/zp240znv/，概述了我已经取得了多大的成就，但是它非常缺乏，所以非常感谢任何帮助。

谢谢

Answer 1

您可以创建递归函数。一个函数可以遍历父列表，而第二个函数将迭代每个列表中的每个项目：

function AnimateList($listItems, index, callback) {
    if (index >= $listItems.length) {
        $listItems.closest("ul").fadeOut(function() {
            $listItems.css("left","400px").css("opacity",0); //reset
            callback(); //next list
        });
        return;
    }

    $listItems.eq(index).animate({left:0, opacity:1}, function() {
        AnimateList($listItems, index+1, callback)
    });
}

function FadeLists($lists, index) {
    if (index >= $lists.length) index = 0;

    var $currentList = $lists.eq(index);
    $currentList.fadeIn(function() {
        AnimateList($currentList.find("li"), 0, function() { FadeLists($lists, index + 1) });
    }) 
}

var $allLists = $("ul")
FadeLists($allLists, 0);

在这里小提琴：http://jsfiddle.net/zp240znv/16/

Answer 2

根据@Regent的要求，发布我的答案以及更新的小提琴，这也消除了显示＆gt; 0索引列表的第二项时的延迟。

OLD FIDDLE（在隐藏上一个列表和显示第二个元素之间有延迟）

var i = 0;
$('ul').each(function() {
    var hide_after = $(this).children().length;
    $(this).children().each(function(counter) {
        $(this)
            .delay(++i * 2000)
            .animate({left:0, opacity:1})
            .delay((hide_after - counter) * 2000)
            .animate({left:'100%', opacity: 0});
    });
});

http://jsfiddle.net/zp240znv/3/

使用timeOuts的新FIDDLE（正确的方式，不用编码过度）

var base_duration = 2000;
$('ul').each(function(i) {
    var li_count = $(this).children().length,
        hide_timeout = ((i+1) * base_duration * li_count);
    $(this).children().each(function(ii) {
        var li = $(this),
            show_timeout = (i * li_count * base_duration) + (ii * base_duration);
        window.setTimeout(function() {
            li.animate({left:0, opacity:1})
        }, show_timeout);
        window.setTimeout(function() {
            li.animate({left:'100%', opacity:0})
        }, hide_timeout);
    });
});

http://jsfiddle.net/zp240znv/17/

Answer 3

好的，这里是代码

<ul id="first">
                <li>List 1, Line 1</li>
                <li>List 1, Line 2</li>
                <li>List 1, Line 3</li>
            </ul>
            <ul id="second">
                <li>List 2, Line 1</li>
                <li>List 2, Line 2</li>
                <li>List 2, Line 3</li>
            </ul>
            <ul id="third">
                <li>List 2, Line 1</li>
                <li>List 2, Line 2</li>
                <li>List 2, Line 3</li>
            </ul>

        <script type="text/javascript">
        $("#first").fadeIn(300,function(){
            $(this).children().each(function(i) {
               $(this).delay((i++) * 2000).animate({left:0, opacity:1});
           });

        });

        setTimeout(function(){
        second_animate();
        },5000)

        function second_animate(){
            $('#first').fadeOut(300,function(){
                $("#second").fadeIn(300,function(){
            $(this).children().each(function(i) {
               $(this).delay((i++) * 2000).animate({left:0, opacity:1});
           });

        });
            });
        }

        </script>

检查你发布的小提琴我编辑了那个

Answer 4

$( ".first" ).animate({ "left": "+=5px" }, 500,function(){
  $( ".second" ).animate({ "left": "+=5px" }, 500,function(){
    $( ".third" ).animate({ "left": "+=5px" }, 500,function(){
      $( "#mainContainer" ).hide("slow"); //main container of all that div 
    });
  });
});

在左侧动画的位置，您可以放置您的主要容器，其中包含所有div。希望你的问题得到解决

$('#firstulid').each(function() {
    $(this).children().each(function(i) {
        $(this).animate({left:0, opacity:1},2000, function(){
              $('#firstulid').hide("slow");
              $('#secondulid').each(function() {
              $(this).children().each(function(i) {
                  $(this).animate({left:0, opacity:1},2000, function(){
                                 $('#secondulid').hide("slow");
                                 $('#thirdulid').each(function() {
                                    $(this).children().each(function(i) {
                                        $(this).animate({left:0, opacity:1},2000, function(){

                                        });
                                    });
                                });
                  });
              });
          });
        });
    });
});

JQuery按顺序为列表项设置动画，然后淡出列表并重复

4 个答案: