jQuery按顺序对列表项进行动画处理，然后淡出列表并重复 [英] JQuery animate list items in sequence then fade out list and repeat

问题描述

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

I have a sequence of events that I am trying to create using jQuery but I am failing miserably.

我有很多列表，每个列表中都有很多列表项.我正在尝试实现的事件列表如下:

I have a number of lists with a number of list items in each list. The list of events I am trying to achieve is as follows:

淡入列表1>动画列表1项目1>动画列表1项目2等等...淡出清单1淡入列表2>动画列表2项目1>动画列表2项目2等等...淡出列表2等...

Fade in list 1 > Animate List 1 item 1 > Animate List 1 item 2 etc... Fade out list 1 Fade in list 2 > Animate List 2 item 1 > Animate List 2 item 2 etc... Fade out list 2 etc...

这将一遍又一遍地循环.

This would then loop over and over.

我当前的jQuery如下:

My current jQuery is as follows:

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

我创建了一个jsfiddle http://jsfiddle.net/zp240znv/概述了我已经走了多远有了它，但是它却很可惜，因此我们将不胜感激.

I have created a jsfiddle http://jsfiddle.net/zp240znv/ outlining how far I have gotten with this but it is woefully lacking so any help is greatly appreciated.

谢谢

推荐答案

您可以创建递归函数.一个函数可以遍历父列表，而第二个函数遍历每个列表中的每个项目:

You could create recursive functions. One function could iterate through the parent lists, while the second will iterate through each item in each list:

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/

这篇关于jQuery按顺序对列表项进行动画处理，然后淡出列表并重复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！