Question

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

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

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

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

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

有人可以解释这个问题吗？这只是一个codepen问题吗？我在过去有很多关于web上的backgroundcolor的问题，包括codepen和JSFiddle，所以这可能就是原因。我不认为这是问题，因为在另一支笔中我将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

尝试将其置于动画完整功能中：

left: 583px;

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

1 个答案: