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

问题

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:

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.

My current jQuery is as follows:

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

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.

Thank you

回答1:

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

Fiddle here: http://jsfiddle.net/zp240znv/16/

回答2:

As requested by @Regent, posting my answer along with an updated fiddle which removes also the delay when showing the second item of the >0 index lists.

OLD FIDDLE (with delay between hiding previous list and showing 2nd element)

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/

NEW FIDDLE using timeOuts (correct way without overdoing it with coding)

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/

回答3:

Ok here's the code

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

Check fiddle you have posted i have edited that

回答4:

$( ".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 
    });
  });
});

At the place of left animation you can place your and here main container is which contains that all divs. hope your problem is solved

$('#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(){

                                        });
                                    });
                                });
                  });
              });
          });
        });
    });
});

来源：https://stackoverflow.com/questions/25788466/jquery-animate-list-items-in-sequence-then-fade-out-list-and-repeat