javascript - JQuery 按顺序动画列表项然后淡出列表并重复

Question

我尝试使用 jQuery 创建一系列事件，但失败得很惨。

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

淡入列表 1 > 动画列表 1 项目 1 > 动画列表 1 项目 2 等等...淡出列表 1淡入列表 2 > 动画列表 2 项目 1 > 动画列表 2 项目 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);

在这里 fiddle :http://jsfiddle.net/zp240znv/16/