為什么動畫在我的JavaScript代碼中不起作用？

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 id="box1" style="position: absolute;">First Box</div>

默認情況下， div position: static ，這導致left或top style屬性不影響該元素。

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移動，您需要設置其樣式位置。

在這種情況下，我將其設置為realistic並且未更改您的代碼中的任何內容

 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>