javascript - 为什么动画在我的 JavaScript 代码中不起作用？

Question

决定根据《JavaScript忍者的 secret 》(第二版)这本书来提高JS的知识水平

有一个使用电路的示例和 kavakami 示例动画。我重写了，但它不起作用，浏览器看不到错误。

function animateIt(elementId) {

  var elem = document.getElementById(elementId)
  var tick = 0

  var timer = setInterval(function() {
    if (tick < 100) {
      elem.style.left = elem.style.top = tick + 'px'
      tick++
    } else {
      clearInterval(timer)

    }
  }, 10)
}
animateIt('box1')

<div id="box1">First Box</div>

可能是什么问题？

Answer 1

试试这个:

function animateIt(elementId) {

  var elem = document.getElementById(elementId)
  var tick = 0

  var timer = setInterval(function() {
    if (tick < 100) {
      elem.style.position = "absolute";
      elem.style.left = elem.style.top = tick + 'px'
      tick++
    } else {
      clearInterval(timer)

    }
  }, 10)
}
animateIt('box1')