Question

根据《 JavaScript忍者的秘密》（第二版）一书，决定提高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')

Answer 2

尝试以下

div

默认情况下，position: static具有left，这会导致top或{{1}}样式属性不影响该元素。

Answer 3

 /* Unchanged JS */ function animateIt(t){var e=document.getElementById(t),n=0,a=setInterval(function(){n<100?(e.style.left=e.style.top=n+"px",n++):clearInterval(a)},10)}animateIt("box1");

/*
 * For the `top` and `left` property to work, your element needs
 * to have a `position: relative` or `absolute` or `fixed`
 */
#box1 { position: relative; }

<!-- Unchanged HTML --> <div id="box1">First Box</div>

此处有更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/top

Answer 4

您的示例运行良好，但是要使div移动，您需要设置其样式位置。

在这种情况下，我将其设置为realtive并且未更改代码中的任何内容

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{
position:relative;
}

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

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

4 个答案: