两个动画运行的同时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/