jQuery不能一次調用css方法兩次？

Question

我有一個Codepen，我正在其中重新創建（正在重新創建，因為我在別人的筆中看到了）一個加載圖標，看起來像牛頓的搖籃。 該codepen可以在這里找到。

我的問題是，我希望球在向外擺動時將背景顏色更改為與邊框相同的顏色，並在返回中心時更改為透明。

我以為我可以在對moveRight和moveLeft函數中的每個球進行動畫處理之前和之后更改顏色，但是無論出於何種原因，這似乎都不起作用。 我已經多次檢查了JQuery函數的語法，但似乎找不到如何調用它們的錯誤。

起初，我認為這個問題與將球設置為透明有關，但我（我相信）對這一理論提出了質疑。 我的新理論是，它試圖一次在兩個不同的元素上調用css函數兩次，結果是故障。 我不確定這是否成立，因為該函數應該在再次調用之前終止，對嗎？

每次調用這兩個函數時，都會傳遞一個類似於“＃1-1”的參數。 這是五個點之一的ID，第二個數字代表數字（因此第一個數字為1-1，第二個為1-2，依此類推。動畫正在運行，因此我認為選擇器沒有問題在功能內部。

有人可以闡明這個問題嗎？ 這只是一個Codepen問題嗎？ 過去，我在Codepen和JSFiddle上都遇到了很多與Web背景色有關的問題，所以這可能就是原因。 我不認為這是問題所在，因為在另一支筆中，我將backgroundcolor設置僅與JQuery一起使用。

這是導致我出現問題的JavaScript：

$(document).ready(function() {
  window.setInterval(function() {
    moveRight('#1-1');
    moveRight('#1-2');
  }, 1000);
  window.setTimeout(function() {
    window.setInterval(function() {
      moveLeft('#1-3');
      moveLeft('#1-4');
      moveLeft('#1-5');
    }, 1000);
  }, 500);
});

function moveRight(id) {
  $(id).css("background-color", "#00094F");
  $(id).animate({
    marginLeft: "-=70",
    marginTop: "-=50",
  }, 250, function() {
    $(id).animate({
      marginLeft: "+=70",
      marginTop: "+=50",
    }, 250);
  });
  $(id).css("background-color", "#78FF81");
}

function moveLeft(id2) {
  $(id).css("background-color", "#00094F");
  $(id2).animate({
    marginLeft: "+=70",
    marginTop: "-=50",
  }, 250, function() {
    $(id2).animate({
      marginLeft: "-=70",
      marginTop: "+=50",
    }, 250);
  });
  $(id).css("background-color", "#78FF81");
}

編輯：我的最新問題是，當我嘗試更改每個動畫調用前后的背景顏色時，調用moveLeft的左三個點不再起作用，甚至沒有動畫。 這里肯定有什么不對，對此有什么想法嗎？

Answer 1

嘗試將其置於具有動畫效果的完整函數中：

  //place this inside of your animate function as a property 
  complete:function() {

   $(id).css("background-color", "#78FF81");

   });