jquery sequential animation

i'm trying to replicate this animation

http://tympanus.net/Tutorials/AnimatedContentMenu/

i'm not able to animate the menu items, than sliding up sequentially

    $('#bar').anim开发者_StackOverflow社区ate(
    {width: '100%'},
    {duration: 500,
    specialEasing: {width: 'linear'},
    complete: function() {
        $('li').each( function() {
                $(this).animate(
                    {top:'0px'},
                    {queue: true, duration: 200, specialEasing: {top: 'easeOutBack'},
                }); 
        });
    }
});

In this way the menu items are animated simultaneously.....what's wrong?

---

Since the queue is per element, nothing is actually queueing here, that's why they're all animating at once. There are a few ways to do this though. One simple way to do this with a small number of items is with .delay(), like this:

$('#bar').animate(
    {width: '100%'},
    {duration: 500,
    specialEasing: {width: 'linear'},
    complete: function() {
        $('li').each(function(i) {
            $(this).delay(i*200).animate(
                {top:'0px'},
                {queue: true, duration: 200, specialEasing: {top: 'easeOutBack'},
            }); 
        });
    }
});

You can test a demo out here.

What this does is delay the animation 200ms * the index of the element in the .each() iteration, so the first animations is instant, the second 200ms later, the next 200ms after that, etc. The reason I recommend this is you don't have to use 200ms for the delay, you can use a smaller number and have the animations overlap a bit, which seems to be the effect you're after.

Another way to do this (more verbose, sequential only, and allows no overlap) is to use .queue() to build your own, for example:

$('#bar').animate(
    {width: '100%'},
    {duration: 500,
    specialEasing: {width: 'linear'},
    complete: function() {
        $('li').each(function() {
            $(document).queue(function(n) {
              $(this).animate(
                {top:'0px'},
                {queue: true, duration: 200, specialEasing: {top: 'easeOutBack'},
                complete: n //call the next item in the queue             
              }); 
            });
        });
    }
});

You can test that version out here.

---

Queue is unique for each element which means each element has its own independent queue. Use a callback after the animation has finished for each item. Example: If you have five li tags, use a particular class for first four of them and add a callback to that class's animation to execute the animation of the next element.

---

This is what I used for sequential animation:

for (var i = 1; i < 10; i++) {
    $('#bullet-' + i).delay(i * 1000 - 1000).fadeIn('fast', function () {
        var id = this
        setTimeout (function () {$(id).css('color', 'lightgray');}, 1500);
    });
}

---

You should use an Array to contain the elements:

var Menus = ['menu_1', 'menu_2', 'menu_3', 'menu _4', 'menu _5'];

Then you define a for loop for the elements, increasing the value (250ms) each loop round:

function myFn(time){
    for(var i = 0; i < Menus.length; i++){
      $('#' + Menus[i]).animate({'opacity' : 1}, time, 'easeInOutQuad');
      time = ++time + 250;
    };
  };

and call the function defining the starting value in ms:

myFn(500);