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

以下是如何使用 vanilla 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.

Answer 2

试试这个

var element = document.getElementById('child');
for (var i=0; i != 100; i++){
    element.style.marginTop += 1;
}

这将循环 100 次，并在每个循环的 marginTop 上加 1。

我建议使用 jQuery 思想，因为使用 jQuery 你可以简单地做

$("#child").animate({ marginTop: 100 });

编辑

顶级示例没有意义，试试这个。

var element = document.getElementById('animated');
    for (var i = 0; i != 100; i++) {
    currentTop = parseInt(element.style.marginTop) || 0;
    newTop = parseInt(currentTop + 1);
    element.style.marginTop = newTop + "px";
}

这也是愚蠢的，因为它循环的方式很快，当浏览器呈现框时，它已经距离顶部 100px。看这里

再次，使用jQuery 解决方案。

Answer 3

一种方法是使用 jQuery 的animate函数，它只需要编写：

$(element).animate({ 'top': '100px' });

例子

Answer 4

检查以下小提琴。我在没有 jquery 的情况下做到了。

 var step = 0;
 window.setInterval(function(){
    var value = (++step)*100;
    if (value<300)
        document.getElementById("child").style.marginTop=value+"px";
    else
       step = -1;
 },1000);

http://jsfiddle.net/pasindur/EbHt5/