Question

I have a navigation container with vertically ordered links inside. What I would like is for each link to fade in and fly from left to right. I am not sure however how to do this sequentially? I have code that does them all at once but I want to do them one at a time. Or at least have them staggered so there is an arbitary delay between animations firing

Code:

$(document).ready(function(){
    $("#navigation a")
        .css({opacity:0,"margin-right":"10px"})
        .animate({opacity:1,"margin-right":"0"});
});

Answer 1

Update

As Nate commented below, arguments.callee is deprecated. Although not everyone agrees on this matter, generally deprecated functionality should be avoid. Thanks to Nate, the following will work without using arguments.callee.

Working Example: http://jsbin.com/idizi/1359/edit

var paras = $('p'),
    i = 0;

// If using jQuery 1.3 or lower, you need to do 
// $(paras[i++] || []) to avoid an "undefined" error
function animateNav () {
    $(paras[i++]).fadeIn('fast', animateNav)
                 .css({opacity:0,"margin-left":"10px"})
                 .animate({opacity:1,"margin-left":"0"});
}

animateNav();

---

This will get the desired result.

Working Example: http://jsbin.com/idizi/1356/edit

var paras = $('p'),
        i = 0;

// If using jQuery 1.3 or lower, you need to do 
// $(paras[i++] || []) to avoid an "undefined" error
(function() {
  $(paras[i++]).fadeIn('fast', arguments.callee)
               .css({opacity:0,"margin-right":"10px"})
               .animate({opacity:1,"margin-right":"0"});
})();

via http://net.tutsplus.com/tutorials/javascript-ajax/quick-tip-easy-sequential-animations-in-jquery/