同一時間在相同對象上的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對象時，該動畫被添加到隊列該對象。當以前的動畫結束時，動畫開始運行。上面的代碼就是這樣做的，它是水平的，然後是垂直的。

此行爲可以被使用動畫的隊列選項（將其設置爲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秒。

更妙的是，隨着隊列中的字符串您可以將動畫添加到不同的隊列。 相同的代碼上面，但使用不同的隊列垂直和水平位置動畫：

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/