jquery 动画中的数学/错误逻辑/每个循环都会产生下降效果

Question

所以我有这段代码，我试图组成...的逻辑我想做的是按顺序为一块掉落的砖块制作动画...... 然而，随着数组中索引的增加，持续时间增加，这显然是我逻辑中的一个错误。我可以对 table 列的第 5 步进行硬编码，但这太丑陋了......下面是代码。

spot.each(function (index, val) {
//$(this).css({ backgroundColor: "blue" })
$(this).animate({ backgroundColor: "white" }, {
  duration: (index + 0.5) * 400
}).animate({
  backgroundColor: "blue"
}, {
  duration: (index + 0.5) * 400
}).animate({
  backgroundColor: "white"
}, {
  duration: (index + 0.4) * 400,
  complete: function () {
    counter = counter + 1;
    if (counter == 5) {
      counter = 0;
      animateTable(spot)
    }
  }
})

所以 spot 是 "tds"（table 个单元格）的数组 .. 同时，我很乐意为此找到解决方案，如果我可以添加同步延迟并使用 $(this).css 而不是仅仅将蓝色框从从上到下..（它将是 css bg -> 白色到 css bg-> 蓝色。

Answer 1

所以我修改了上面的代码，将它改成这样，并在某种程度上最小化乘以索引的随机因子，虽然不是完全如此。仍然不确定我将如何处理这个问题，但以下内容确实有所帮助。

function animateTable(spot) {
  var rand = getRandomFloat(0.4, 0.9)
  var randomColor = theColors[Math.floor(Math.random() * theColors.length)];
  var counter = 0

  spot.each(function (index, val) {
    if (!gRunning) {
      $(this).animate({ backgroundColor: "white" }, {
        duration: (index + 1) * rand * 3000,
        easing: "linear",
        step: function () {
          if (countDownRunning) {
            $(this).stop()
            //console.log("stopped")
          }
        }
      }, $(this).attr("data-animating", true)).animate({
        backgroundColor: randomColor
      }, {
        duration: (index + 1) * 200,
        easing: "linear",
        step: function () {
          if (countDownRunning) {
            $(this).stop()
            //console.log("stopped")
          }
        }
      }).animate({
        backgroundColor: "white"
      }, {
        duration: (index + 1) * 200,
        easing: "linear",
        step: function () {
          if (countDownRunning) {
            $(this).stop()
            //console.log("stopped")
          }
        },
        complete: function () {

          counter = counter + 1;
          if (counter == 5) {
            counter = 0;
            initAnim()
            $(this).attr("data-animating", false)
          }
        }
      })
    } else {
      return false
    }
  })
}

Answer 2

我假设索引增加。如果您不想增加持续时间，则根本不应将索引包含在持续时间数学中。例如：

duration: (index + 0.5) * 400

变成：

duration: 0.5 * 400

jquery 动画中的数学/错误逻辑/每个循环都会产生下降效果

mathematics / bad logic in jquery animation / for each loop to give a falling effect

javascript

foreach

jquery

animation

jquery-ui