javascript - 如何逐像素移动DIV

Question

我有一个像这样的 DIV 设置。

  <div id="parent" class="parent">
            <div id="child" class="child">
            </div>
   </div>

样式

    <style>
    .parent{
    float:left; height:300; width:300px; background-color:#00ff00;
    }
    .child{
    float:left; height:60; width:60px; background-color:#00ff00;
    }
    </style>


<script>
            function move(){
                while(m < 100){
                document.getElementByid('child').style.marginTop = m;
                m = m+1;
                }
            }
            move();
 </script>

我想将内部 DIV(命名为子项)从上到下逐个像素地移动 100 像素。我认为可以使用 style.marginTop = '' 和 settimeout() 函数来完成

但仍然无法正常工作。

Answer 1

以下是如何使用原生 JavaScript 为您的 div 设置动画:http://jsfiddle.net/z6F7m/1/

JavaScript

var elem = document.getElementById('animated'),
    top = parseInt(elem.style.marginTop, 10) || 0,
    step = 1;

function animate() {
    if (top < 100) {
        requestAnimationFrame(animate);
        elem.style.marginTop = top + 'px';
        top += step;
    }
}

animate();

我强烈推荐你使用 requestAnimationFrame 而不是 setTimeout，如果浏览器不支持 requestAnimationFrame 你可以回退到 setTimeout 。