我尝试使用 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/概述了我在这方面取得的进展,但非常缺乏,因此非常感谢任何帮助。
谢谢
最佳答案
您可以创建递归函数。一个函数可以遍历父列表,而第二个函数将遍历每个列表中的每个项目:
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/
关于javascript - JQuery 按顺序动画列表项然后淡出列表并重复,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25788466/