Home/ Questions/Q 6120751
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T15:42:16+00:00

This problem should be simple enough, i am trying to learn animation using javascript

  • 0

This problem should be simple enough, i am trying to learn animation using javascript and to begin i have an image of a ball that i want to move to the left a single px at a time. here’s what i have so far:

style.css

 #field {

   height:200px;
   border-bottom: 1px solid black;
 }

animation.js

 function move()
 {
        ball = document.getElementById('ball');

    ball.style.right = (ball.style.right + 1) + "px";
 }

index.html

 <link href="../js2/stylesheet.css" rel="stylesheet" type="text/css" />
 <script src="animattion.js"></script>
 </head>

 <body>


     <div id="field">
             <img src="ball.gif" id="ball" />
     </div>

    <script type="text/javascript">
             setInterval(move,20);
    </script>

 </body>
 </html>

this is what i have so far and the ball doesn’t seem to move. What am i doing wrong?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can’t just wrap the animation in a for-loop. You will see nothing and it will be too fast. You need to wrap around using setInterval or setTimeout. Something like this

    setInterval(move, 20 /*milliseconds, 50frames/second */)

    You also need to strip ‘px’ from style.right and parse int. I think you can do 

    parseInt(obj.style.right.replace('px', ''))

    Here is a demo! http://jsfiddle.net/t6PY5/

    • 0