javascript - How to move DIV pixel by pixel - Stack Overflow

admin管理员组

文章数量:1287625

I have a DIV setup like this.

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

Styles

    <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>

I want to move inner DIV ( named child) pixel by pixel from top to bottom by 100 pixels. I think it can be done using style.marginTop = '' and settimeout() function

But still not able to get this working.

I have a DIV setup like this.

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

Styles

    <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>

I want to move inner DIV ( named child) pixel by pixel from top to bottom by 100 pixels. I think it can be done using style.marginTop = '' and settimeout() function

But still not able to get this working.

• javascript
• css

Share Improve this question Follow edited Mar 1, 2013 at 16:55 Ravish Kumar asked Mar 1, 2013 at 16:38 Ravish KumarRavish Kumar 63211 gold badge99 silver badges2121 bronze badges 7

• 9 Show us your JavaScript code. – Halcyon Commented Mar 1, 2013 at 16:40
• do you mean animating? – Dogoku Commented Mar 1, 2013 at 16:40
• @dogoku yes animating. – Ravish Kumar Commented Mar 1, 2013 at 16:41
• I would remend doing this using Jquery's animate function, it does most of the heavy lifting for you. api.jquery./animate – Liam Commented Mar 1, 2013 at 16:42
• 2 You could also use CSS transitions if browser support isn't a concern. – thesonglessbird Commented Mar 1, 2013 at 16:45

 |  Show 2 more ments

4 Answers 4

Sorted by: Reset to default 7

Here is how you can animate your div with vanilla JavaScript: http://jsfiddle/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();

I highly remend you to use requestAnimationFrame instead of setTimeout, if the browser does not supports requestAnimationFrame you can fallback to setTimeout.

Try this

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

That'll loop 100 times and add 1 to the marginTop each loop.

I'd suggest using jQuery thought, because with jQuery you can simply do

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

EDIT

Top example doesn't make sense, try this.

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";
}

This is also stupid because it loops way to fast and by the time the browser renders the box, it's already 100px from the top. See here

Again, go with the jQuery solution.

One way of doing it is using jQuery's animate function, which would require merely writing:

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

Example

Check the following fiddle. I did it without 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/pasindur/EbHt5/

本文标签： javascriptHow to move DIV pixel by pixelStack Overflow