How can you make the red box moves from top-left corner to the top-right corner, then to the right-bottom, then stop?
<!DOCTYPE html> <html> <head> <title>ANIMATION</title> </head> <body> <div id="container" style="width:200px;height:200px;background:green;position:relative;"> <div id="box" style="width:50px;height:50px;background:red;position:absolute;"> </div> </div> <script> //our box element var box = document.getElementById('box'); var pos = 0; var t = setInterval(moveR, 10); function moveR() { if(pos >= 150) { clearInterval(t); } else { pos += 1; box.style.left = pos+'px'; } } </script> <script> var box = document.getElementById('box'); var pos = 0; var t = setInterval(moveB, 10); function moveB() { if(pos >= 150) { clearInterval(t); } else { pos += 1; box.style.top = pos+'px'; } } </script> </body> </html>
Often have questions like this?
Learn more efficiently, for free:
