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

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