jQuery同時在同一對象上循環播放動畫

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為對象設置動畫時，會將動畫添加到該對象的隊列中。 先前的動畫結束后，動畫將開始運行。 上面的代碼正是這樣做的，先進行水平動畫，然后進行垂直動畫。

通過使用動畫的queue選項（將其設置為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)

演示： http : //jsfiddle.net/Uewzc/1/