两个动画同时运行jquery

Question

我试图让两个方块同时移动...... 我知道第一个动画重复到无限但我应该怎么做？

JsFiddle

Answer 1

原因是您需要等待第一个动画完成，然后再告诉方框开始下一组动画。在你的代码中，你没有给红框一个机会开始制作动画，因为黄色的一个经常这样做（有一个由animateTheBox创建的闭包，两个框都在调用它）:)

所以我将完整的函数处理程序添加到.animate()并将animateTheBox()调用移到那里。

请参阅：http://jsfiddle.net/DkmKA/

Answer 2

其他两个解决方案都是正确的，但请不要将您的代码列为if else条件的大量内部块的列表。请考虑以下解决方案：

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 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/

本着DRY的精神，这是一个更短的方式：

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