Как перемещать пиксель 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

Вот как вы можете оживить ваш DIV с ванильным JavaScript: 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 раз и добавить 1 к MarginTop каждый цикл.

Я предложил бы использовать JQuery подумал, потому что с JQuery вы можете просто сделать

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

EDIT

Top пример не имеет смысла, попробуйте это.

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 сверху. See here

Снова, перейдите с jQuery solution.

Answer 3

Один из способов сделать это является использование animate функции JQuery, которая потребовала бы просто писать:

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

Example

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/