javascript - JQuery 不能一次调用两次 css 方法吗？

Question

我有一个代码笔，我正在重新创建(重新创建是因为我在别人的笔中看到了这个)一个看起来像牛顿 Gradle 的加载图标。该codepen可以找到here .

我的问题是，我希望球在向外摆动时将背景颜色更改为与其边框相同的颜色，并在返回中心时变回透明。

我认为我可以在 moveRight 和 moveLeft 函数中为每个球制作动画之前和之后更改颜色，但无论出于何种原因，这似乎都不起作用。我已经多次检查 JQuery 函数的语法，但似乎找不到我调用它们的方式的错误。

起初，我认为这个问题与将球设置为透明有关，但我(我相信)揭穿了这个理论。我的新理论是它试图在两个不同的元素上一次调用 css 函数两次，结果只是出现故障。但是，我不确定这是不是真的，因为该函数应该在再次调用之前终止，对吧？

每次调用任一函数时，我都会传递一个类似于“#1-1”的参数。这是五个点之一的 ID，第二个数字代表数字(所以第一个是 1-1，第二个是 1-2，等等。动画正在运行，所以我认为选择器没有问题函数内部。

有人可以阐明这个问题吗？这只是一个codepen问题吗？过去，我在 codepen 和 JSFiddle 上都遇到过很多与网络背景颜色相关的问题，所以这可能就是原因。我不认为这是问题所在，因为在另一支笔中，我将背景颜色设置为仅适用于 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");

   });