如何在jQuery中使用队列动画？

Question

我想增加/减少和元素的字体，然后是该类的下一个元素等等，对于一组元素<div class="test"></div> <div class="test"></div> ....。我的意思是

step 1: enlarging the first element and returning to normal size 
step 2: enlarging the second element and returning to normal size 
.... 

我的基本代码是

$(document).ready(function() { 
    $('.test').animate({ 
       left:50, 
       fontSize: "2em"}, 
       "slow") 
       .animate({ 
       left:-50, 
       fontSize: "1em"}, 
       "slow"); 

这将影响到所有的元素一次。我怎样才能让队列逐一进行更改。一次放大一个元素。

Answer 1

你可以做到这一点与

$('.test').each(function(idx){ 
    var duration = 1200; // duration for all animations (2 x slow) 
    $(this) 
     .delay(duration*idx) 
     .animate({ left:50, fontSize: "2em" }, 'slow') 
     .animate({ left:-50, fontSize: "1em" }, 'slow'); 
}); 

演示在http://jsfiddle.net/gaby/rz5Es/

---

对于更精确的控制和在类似的问题在我的答案排队看更多的自由：
A non-nested animation sequence in jQuery?

Answer 2

据我了解你正在尝试做这样的事情，

$(document).ready(function() { 
    (function mycallback(i) { 
     var elems = $('.test'); 
     elems.eq(i).animate({ 
        left:50, 
        fontSize: "2em"}, function() { 
     mycallback(i + 1 < elems.length ? i + 1 : 0); 
     }); 
    }(0)); 
}); 

​DEMO

UPDATE：

这是一个示例代码，你可以，如果你改变它像这样想要反转效果，

$(document).ready(function() { 
    (function mycallback(i) { 
     var elems = $('.test'); 
     elems.eq(i).animate({ 
        left:50, 
        fontSize: "2em"}, function() { 
     $(this).animate({ 
       left:-50, 
       fontSize: "1em"}, 
       "slow"); 
     if (i + 1 < elems.length) 
      mycallback(i+1); 
     }); 
    }(0)); 
}); 

​UPDATED DEMO

Answer 3

您将需要环通的所有元素，并在他们每个人的顺序执行animate，这里是示例代码做递归

function animate_sequential(elems, css, delay, index){ 
    if(index===undefined) index = 0; 
    if(index >= elems.length) return;  
    $(elems[index]).animate(css, delay, function(){ 
     animate_sequential(elems, css, delay, index+1) 
    }) 
} 

animate_sequential($('div'), {'font-size':'30px'}, 500) 
animate_sequential($('div'), {'font-size':'15px'}, 500) 

看到它在行动http://jsfiddle.net/anuraguniyal/QJc9L/

它可以可以轻松地转换为jQuery插件，以便您可以做$('div').animate_sequential并保持与jQuery相同的界面动画效果，还可以对其进行进一步增强，以便通过传递原始CSS或从elem中获取它来恢复原始CSS ENT。

Answer 4

您需要使用回调，你想顺序动画的元素的数组...

function animateSequence(elements){ 
    var element = $(elements).first(); 
    var originalSize = $(element).css('font-size'); 

    elements = $(elements).not($(element)); 

    $(element).animate(
     { fontSize: "2em" }, 
     "slow", 
     function(){ 
      $(this).animate(
       { fontSize: originalSize }, 
       "slow", 
       function(){ 
        if(elements.length > 0) 
         animateSequence(elements); 
       } 
      ) 
     } 
    ); 
} 

animateSequence($('.test')); 

如果你想用它玩：http://jsfiddle.net/xS7X7/

Answer 5

那么简单多了，可读性和可扩展性与Frame.js：

$('.test').each(function(i){ 
    var element = $(this); 
    var originalSize = element.css('font-size'); 

    Frame(function(next){ 
     element.animate({ fontSize: "2em" }, "slow", next); 
    }); 
    Frame(function(next){ 
     element.animate({ fontSize: originalSize }, "slow", next); 
    }); 
}); 
Frame(function(next){ 
    // add a callback after all the animations have finished 
    next(); 
}); 
Frame.start();