兩個動畫運行的同時jQuery的

Question

我試圖讓兩個格在同一時間動... 我知道第一動畫重複無限，但我應該怎麼辦？

JsFiddle

Answer 1

兩種其他解決方案都是正確的，但請，請不要讓您的代碼列表如果其他條件與一個巨大的內部塊。考慮，而不是下面的解決方案：

http://jsfiddle.net/NM78r/

$(document).ready(function(){ 
    animateTheBox('block1',0); 
    animateTheBox('block2',2); 
}); 
function animateTheBox(block,i) {  
    var animation = {}; 
    var duration = 3000; 
    var easing = 'linear'; 
    var done = function(){ animateTheBox(block, (i+1)%4); }; 
    switch(i){ 
     case 0: animation = {'left' : "-=100px"} 
     break; 
     case 1: animation = {'top' : "-=100px"} 
     break; 
     case 2: animation = {'left' : "+=100px"} 
     break; 
     case 3: animation = {'top' : "+=100px"} 
     break; 
     default: return; //This is so you can't call the function in weird ways, as before. 
    } 
    $('.' + block).animate(animation, duration, easing, done); 
} 

使用switch語句來決定做什麼樣的動畫，然後只寫實際的動畫調用一次。這種抽象更容易閱讀，並且具有更易維護的附加好處。你可以確定你的動畫每次都會以同樣的方式完成。

編輯：

雖然上面的設計模式可能是從長遠來看更好，你可以很容易地使用數組，而不是這樣做：

$(document).ready(function(){ 
    animateTheBox('block1',0); 
    animateTheBox('block2',2); 
}); 
function animateTheBox(block,i) {  
    var animations = [ 
      {'left' : "-=100px"} 
      , {'top' : "-=100px"} 
      , {'left' : "+=100px"} 
      , {'top' : "+=100px"} 
     ]; 
    var duration = 3000; 
    var easing = 'linear'; 
    var done = function(){ animateTheBox(block, (i+1)%4); }; 
    if (i < 0 || i >= animations.length) 
     return; //Don't deal with out of bound numbers. 
    $('.' + block).animate(animations[i], duration, easing, done); 
} 

http://jsfiddle.net/4S6Mg/1/

而實際上，這可以使多步驟動畫抽象變得非常簡單：

$(document).ready(function(){ 
    var block1Steps = [ 
      {'left' : "-=100px"} 
      , {'top' : "-=100px"} 
      , {'left' : "+=100px"} 
      , {'top' : "+=100px"} 
     ]; 
    var block2Steps = [ 
      {'left' : "+=100px"} 
      , {'top' : "+=100px"} 
      , {'left' : "-=100px"} 
      , {'top' : "-=100px"} 
     ]; 
    multiAnimate($('.block1'), block1Steps, 3000, 'linear', true); 
    multiAnimate($('.block2'), block2Steps, 3000, 'linear', true); 
}); 
function multiAnimate(item, animations, duration, easing, infinite){ 
    var i = -1; 
    var step = function(){ 
     i++; 
     if (infinite) 
      i %= animations.length; 
     if (i >= animations.length) return; 
     item.animate(animations[i], duration, easing, step); 
    }; 
    step(); 
} 

http://jsfiddle.net/jp2K4/

然後，如果你想獲得真正Apeshit，你可以給每個動畫自己的時間和放鬆，和BAM！你基本上已經爲自己創建了一個任意的多步驟動畫庫。

function multiAnimate(item, animations, duration, easing, infinite){ 
    var defaultDuration = 1000; 
    var defaultEasing = 'linear'; 
    var i = -1; 
    var step = function(){ 
     i++; 
     if (infinite) 
      i %= animations.length; 
     if (i >= animations.length) return; 
     item.animate(animations[i].animation 
      , (animations[i].duration)? animations[i].duration: defaultDuration 
      , (animations[i].easing)? animations[i].easing: defaultEasing 
      , step 
     ); 
    }; 
    step(); 
} 
$(document).ready(function(){ 
    var block1Steps = [ 
      { 
       animation: {'left' : "-=100px"} 
       , duration: 3000 
       , easing: 'linear' 
      } 
      , { 
       animation: {'top' : "-=100px"} 
       , duration: 1000 
       , easing: 'swing' 
      } 
      , { 
       animation: {'left' : "+=100px"} 
       , duration: 5000 
       , easing: 'swing' 
      } 
      , { 
       animation: {'top' : "+=100px"} 
       , duration: 2000 
       , easing: 'linear' 
      } 
     ]; 
    var block2Steps = [ 
      { 
       animation: {'left' : "+=100px"} 
       , duration: 5000 
       , easing: 'swing' 
      } 
      , { 
       animation: {'top' : "+=100px"} 
       , duration: 2000 
       , easing: 'linear' 
      } 
      , { 
       animation: {'left' : "-=100px"} 
       , duration: 3000 
       , easing: 'linear' 
      } 
      , { 
       animation: {'top' : "-=100px"} 
       , duration: 1000 
       , easing: 'swing' 
      } 
     ]; 
    multiAnimate($('.block1'), block1Steps, 3000, 'linear', true); 
    multiAnimate($('.block2'), block2Steps, 3000, 'linear', true); 
}); 

http://jsfiddle.net/nnQU8/

Answer 2

的原因是，你需要等待第一個動畫告訴箱子，開始下一組動畫之前完成。在你的代碼，你不給的紅色方塊的機會，開始動畫，因爲黃色的不斷做（有由animateTheBox和兩個框創建了一個封閉的調用它）:)

所以我添加完成功能處理程序到您的.animate()並將animateTheBox()呼叫移到那裏。

參見：http://jsfiddle.net/DkmKA/

Answer 3

您需要使用每個動畫完成函數來啓動下一個動畫這樣的：

$(document).ready(function(){ 
    animateTheBox('block1',0); 
    animateTheBox('block2',2); 
}); 
function animateTheBox(block,i) { 
    if (i==0) 
    { 
     $('.'+block).animate({'left' : "-=100px"}, 3000, 'linear', function() { 
      animateTheBox(block,1); 
     }); 

    } 
    else if (i==1) 
    { 
     $('.'+block).animate({'top' : "-=100px"}, 3000, 'linear', function() { 
      animateTheBox(block,2); 
     }); 
    } 
    else if (i==2) 
    { 
     $('.'+block).animate({'left' : "+=100px"}, 3000, 'linear', function() { 
      animateTheBox(block,3); 
     }); 
    } 
    else if (i==3) 
    { 
     $('.'+block).animate({'top' : "+=100px"}, 3000, 'linear', function() { 
      animateTheBox(block,0); 
     }); 
    } 
} 

工作演示：http://jsfiddle.net/jfriend00/39SUN/

乾的精神，這裏有一個更簡短的方法：

$(document).ready(function(){ 
    animateTheBox('.block1',0); 
    animateTheBox('.block2',2); 
}); 

function animateTheBox(block,i) { 
    var anims = [ 
     {left: "-=100px"}, 
     {top: "-=100px"}, 
     {left: "+=100px"}, 
     {top: "+=100px"}, 
    ]; 
    $(block).animate(anims[i], 3000, 'linear', function() { 
     animateTheBox(block,(i+1) % 4); 
    }); 
} 

工作演示：http://jsfiddle.net/jfriend00/nKuGs/