Javascript jQuery：元素列表上的交错动画

我有一个导航容器，里面有垂直排列的链接。我想要的是每个链接淡入淡入并从左向右飞行。但我不确定如何按顺序执行此操作？我有代码可以一次完成所有任务，但我想一次完成一个任务。或者至少让它们交错排列，这样两个动画之间就有一个任意的延迟

代码：

---

更新

正如Nate在下面评论的那样，

参数.被调用方

已被弃用。尽管如此，还是应该避免使用通常不推荐的功能。多亏了Nate，下面的代码可以在不使用

参数的情况下运行。被调用方

工作示例：

---

这将得到预期的结果

工作示例：

---

通过

这是对$.queue的完美使用。谢谢你的提问：你让我学会了如何更好地使用它来研究这个问题

下面是一个活生生的例子：

---

我还强烈建议大家阅读$.queue：这是值得了解的

这里是一个不依赖jQuery的解决方案

小提琴：

当然，它也可以应用于jquery目标

stagger($(".element-class"), 1000, function(el){console.log(el)})

---

类似的东西这是非常聪明的。但请注意，arguments.callee在EC5 strict中已被弃用。我不知道它被弃用了。尝试找到一种使用它的方法。只需使用命名函数而不是匿名函数。谢谢你的更新-我也喜欢Fuch论点的链接。我强烈不同意他的观点（严格模式让你选择将被继承的语言特性，这是一个非常好的主意），但正如你所说，这是一个有争议的问题。我喜欢结尾的例子，但是我觉得如果没有++的魔力，当我超过了段落数时，没有无声的失败，会更好。这样，一切都是好的和明确的。我不能代表投票否决它的人说话，但当你完成设置间隔时不清除它是非常糟糕的做法。它会一直发射到世界末日。谢谢内特，回答得很好，但我决定使用类似于Jsuar建议的东西。但是给了你+1块钱！我仍然建议学习$.queue，但由于我也喜欢JSuar的答案，我不能过多地责备你

$(document).ready(function(){
   var links =  $("#navigation a");
   var count = 0;

   var handle = setInterval(function(){
         $(links[count])
            .css({opacity:0,"margin-right":"10px"})
            .animate({opacity:1,"margin-right":"0"});
             count++;

             if(count==links.length){
                  clearInterval(handle);
              }                

    }, 5000);



});

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

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

// Cache our jQuery-wrapped objects
var $navigation = $('#navigation'),
    $navigationLinks = $navigation.find('a');

// Set the initial state on navigation links for future animation
$navigationLinks.css({
  opacity: 0,
  "margin-left": "20px"
});

$navigationLinks.each(function (i, item) {
  var $item = $(item);

  // Add animations on each item to the fx queue on the navigation DOM element
  $.queue($navigation[0], 'fx', function () {
    var that = this;
    $item.animate({
      opacity: 1,
      "margin-left": "0"
    }, {
      complete: function () {
        // Fire the next item in the queue as the callback
        $.dequeue(that);
      }
    });
  });
});

// Start the navigation queue
$navigation.dequeue();

   function stagger(targets, interval, action){
    for (var i = 0, maxi = targets.length; i < maxi; i++) {
        (function(){
            var target = targets[i];
            setTimeout(function(){action(target);}, interval*i);
        })();
    }
   }

stagger([1, 2, 3], 1000, function(val){console.log(val)})

stagger($(".element-class"), 1000, function(el){console.log(el)})