如何在jQuery中使用隊列動畫？

我想增加/減少和元素的字體，然後是該類的下一個元素等等，對於一組元素<div class="test"></div> <div class="test"></div> ....。我的意思是如何在jQuery中使用隊列動畫？

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

這將影響到所有的元素一次。我怎樣才能讓隊列逐一進行更改。一次放大一個元素。

來源

2012-04-23 Googlebot

爲什麼你有兩個相同的'animate（）'方法鏈接在一起？我不認爲'fontSize'是一個有效的CSS屬性。也許你想'font-size'。 – Sparky 2012-04-23 16:55:08

@ Sparky672對不起，這是一個錯字。第二個「動畫」旨在扭轉效應。 – Googlebot 2012-04-23 16:56:47

你可以做到這一點與

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

來源

2012-04-23 17:14:03

'fontSize'是'font-size'的可接受替代品嗎？ – Sparky 2012-04-23 17:52:43

@ Sparky672，當不使用帶引號的屬性（*作爲字符串*）時，您需要使用這種大小寫（*和刪除短劃線*）。它是內部屬性名稱。 – 2012-04-23 17:57:22

那麼在這種情況下，'font-size''或'fontSize'是可以接受的嗎？是否所有的虛線屬性名都有這樣的內部DOM副本？ – Sparky 2012-04-23 18:31:22

據我瞭解你正在嘗試做這樣的事情，

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

來源

2012-04-23 17:09:35 ocanal

類似的東西，但在你的例子中，字體不會調整到正常。 – Googlebot 2012-04-23 17:20:46

@Ali，我已經更新了我的答案，只要你想。 – ocanal 2012-04-23 17:31:21

您將需要環通的所有元素，並在他們每個人的順序執行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。

來源

2012-04-23 17:10:21

您需要使用回調，你想順序動畫的元素的數組...

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/

來源

2012-04-23 17:10:58

那麼簡單多了，可讀性和可擴展性與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();

來源

2012-04-23 17:31:04 BishopZ

如何在jQuery中使用隊列動畫？

回答

相關問題