javascript - jQuery:元素列表上的交错动画

Question

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

代码:

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

Answer 1

这是 $.queue 的完美用法。感谢您提出问题:您让我学会了如何更好地使用它来研究这个问题。

这是一个活生生的例子:http://jsfiddle.net/EJgEC/

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

我还强烈建议阅读 $.queue:它值得了解。 http://api.jquery.com/jQuery.queue/