jQuery:元素列表上的交错动画 [英] jQuery: Staggered animation on list of elements

问题描述

我有一个导航容器，里面有按垂直顺序排列的链接.我想让每个链接淡入并从左向右飞行.但是，我不确定如何依次执行此操作?我的代码可以一次完成所有操作，但我想一次执行一次.或者至少将它们错开，这样在动画触发之间会有人为的延迟

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

代码:

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

推荐答案

更新

如Nate下文所述，不推荐使用arguments.callee.尽管不是每个人都对此事表示同意，通常应避免使用不推荐使用的功能.多亏了Nate，以下操作无需使用arguments.callee即可实现.

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.

工作示例: http://jsbin.com/idizi/1359/编辑

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.

工作示例: http://jsbin.com/idizi/1356/编辑

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/

这篇关于jQuery:元素列表上的交错动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！