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/

Answer 2

<强>更新

正如Nate在下面评论的那样，arguments.callee已被弃用。虽然not everyone agrees on this matter，但应避免使用通常弃用的功能。感谢Nate，以下内容无需使用arguments.callee即可使用。

工作示例： 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();

这将获得理想的结果。

工作示例： 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"});
})();

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

Answer 3

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



});

Answer 4

这是一个非jQuery依赖的解决方案。

小提琴：http://jsfiddle.net/N9afT/

   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)})

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

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

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

4 个答案: