javascript - JQuery animate list items in sequence then fade out list and repeat - Stack Overflow

admin管理员组

文章数量:1277377

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 / outlining how far I have gotten with this but it is woefully lacking so any help is greatly appreciated.

Thank you

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/zp240znv/ outlining how far I have gotten with this but it is woefully lacking so any help is greatly appreciated.

Thank you

• javascript
• jquery
• html
• animation

Share Improve this question Follow asked Sep 11, 2014 at 13:14 David BrooksDavid Brooks 75922 gold badges1616 silver badges2929 bronze badges 6

• 1 is this your desired effect? jsfiddle/zp240znv/3 – wiesion Commented Sep 11, 2014 at 13:27
• @wiesion it's a bit tricky, but it's short and correct one. You should probably post it as an answer... – Regent Commented Sep 11, 2014 at 13:30
• there's just one problem with my quick fix, it delays 2000ms after the first element of the next list is displayed, are you ok with that? – wiesion Commented Sep 11, 2014 at 13:31
• i've posted an answer containing both versions (code and link to fiddle) – wiesion Commented Sep 11, 2014 at 13:53
• Wow, wonderful response, thank you :) I'll look through them and accept an answer asap. Thanks – David Brooks Commented Sep 11, 2014 at 13:56

 |  Show 1 more ment

4 Answers 4

Sorted by: Reset to default 6

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/zp240znv/16/

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/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/zp240znv/17/

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

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

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

本文标签： javascriptJQuery animate list items in sequence then fade out list and repeatStack Overflow