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

您需要使用回调和要按顺序设置动画的元素数组...

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 2

你可以用

来做

$('.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 3

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

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

<强>更新

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

$(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 4

你需要循环遍历所有元素并按顺序对每个元素执行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带回原始的CSS或者从元素中获取它。

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

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

5 个答案: