javascript - 两个动画同时运行jquery

Question

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

提琴手

Answer 1

原因是您需要等待第一个动画完成，然后再告诉框开始下一组动画。在您的代码中，您没有给红色框一个开始动画的机会，因为黄色框一直在做它（有一个由 the 创建的闭包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/