Question

是否可以以不同的速度为同一个对象设置动画并同时启动？

function loop_horiz(direction){
    var d = (direction == 1) ? '+' : '-';
    $('.op').animate({ left: d + '200' },
     4000, function() { loop_horiz(direction * (-1)) });
}

function loop_vert(direction){
    var d = (direction == 1) ? '+' : '-';
    $('.op').animate({ bottom: d + '200' },
    2000, function() { loop_vert(direction * (-1)) });
}

loop_horiz(1);
loop_vert(1)

Answer 1

通常在使用jQuery动画对象时，动画会添加到该对象的队列中。当先前的动画结束时，动画开始运行。上面的代码完全相同，水平动画，然后垂直动画。

使用动画的队列选项可以覆盖此行为（将其设置为false）。

function loop_horiz(direction) {
    var d = (direction == 1) ? '+' : '-';
    $('.op').animate({
        left: d + '200'
    }, {
        queue: false,
        duration: 4000,
        done: function () {
            loop_horiz(direction * (-1))
        }
    });
}

function loop_vert(direction) {
    var d = (direction == 1) ? '+' : '-';
    $('.op').animate({      
        bottom: d + '200'
    }, {
        queue: false,
        duration: 2000,
        done: function () {
            loop_vert(direction * (-1))
        }
    });

}

loop_horiz(1);
loop_vert(1)

另一种（丑陋的）可能性是合并动画，但它需要你将水平动画分成两半，距离超过2秒。

http://api.jquery.com/animate/

更好的是，将队列作为字符串，您可以将动画添加到不同的队列。与上面相同的代码，但使用不同的队列进行垂直和水平动画：

function loop_horiz(direction) {
    var d = (direction == 1) ? '+' : '-';
    $('.op').animate({
        left: d + '200'
    }, {
        queue: 'horizontal',
        duration: 4000,
        done: function () {
            loop_horiz(direction * (-1))
        }
    }).dequeue('horizontal');
}

function loop_vert(direction) {
    var d = (direction == 1) ? '+' : '-';
    $('.op').animate({
        bottom: d + '200'
    }, {
        queue: 'vertical',
        duration: 2000,
        done: function () {
            loop_vert(direction * (-1))
        }
    }).dequeue('vertical');

}

loop_horiz(1);
loop_vert(1)

DEMO：http://jsfiddle.net/Uewzc/1/

jQuery循环动画同时在同一个对象上

1 个答案: