使用延遲在中間暫停jQuery動畫。有一些問題

Question

$('textarea.contact').click(function(){ 
    $(this).animate({"backgroundPosition": "+=350 -=150"}, 500).delay(500); 
    $(this).animate({"backgroundPosition": "+=350 -=150"}, 500); 
}); 

我正在使用背景位置庫爲了動畫背景。我想讓背景滑到一半。暫停在中間，然後繼續前進。不幸的是，當我用這種方式編寫代碼時，動畫會移動一半。在中間暫停，然後從頭開始重新開始動畫而不是遞增。有誰知道爲什麼？

Answer 1

也許用一個回調函數，像這樣：

$(this).animate({"backgroundPosition": "+=350 -=150"}, 500, function() { 
    $(this).delay(500).animate({"backgroundPosition": "+=350 -=150"}, 500); 
}); 

還挺聽起來像CSS的背景圖像不會被保存在初始動畫完成後，也許設置的CSS在回調函數：

$(this).animate({"backgroundPosition": "+=350 -=150"}, 500, function() { 
    $(this).css({"backgroundPosition": '...'}); 
    $(this).delay(500).animate({"backgroundPosition": "+=350 -=150"}, 500); 
}); 

Answer 2

排序黑客的辦法，但對於沒有移動動畫：

$(this) 
    .animate({"backgroundPosition": "+=350 -=150"}, 500) 
    .animate({"backgroundPosition": "+=0 +=0"}, 500) 
    .animate({"backgroundPosition": "+=350 -=150"}, 500); 

jsfiddle with different rules, because I didn't want to find a background image.