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

JQuery animate list items in sequence then fade out list and repeat

本文关键字：列表 淡出 然后 顺序 设置 JQuery 动画      更新时间：2023-09-26

我试图使用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});
    });
});

我创建了一个jsfiddlehttp://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 here：http://jsfiddle.net/zp240znv/16/

根据@Regent的要求，将我的答案与更新的fiddle一起发布，这也消除了显示>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/

新的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/

好的，这是代码

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

检查你发布的小提琴，我已经编辑了

$( ".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(){
                                        });
                                    });
                                });
                  });
              });
          });
        });
    });
});
相关文章：