Jump to content
Larry Ullman's Book Forums

Problem With Simple Animation.


Recommended Posts

I am trying to animate some text for learning purposes, which I have done before, and now I can't seem to be able to do it.

 

Basically I have some text positioned relative. It has an property of left: 10px;. In the javascript I want to use setInterval to add 50px every 500ms. I have pasted the code in a jsFiddle.

 

http://jsfiddle.net/98d6X/1/

 

Why isn't it adding the px or moving?

Link to comment
Share on other sites

It doesn't work because document.getElementById('move').style.left cannot be used to read styles set via CSS (i.e., left: 10px;).

To do this properly with the method you're implementing, you either need to set something like the following in your JS before starting the animation, or you need to use a different CSS method (which differs depending on the browser) in order to read CSS styles/computer styles.

 

document.getElementById('move').style.left = '10px';

Link to comment
Share on other sites

Solved. Thanks HartleySan. It was the window.onload causing the problem as well as it being initially set in javascript. I had to choose no wrap instead of onload on the side. I've never had that problem before!

http://jsfiddle.net/98d6X/3/

 

Another problem that came up is if I use

var mov = document.getElementById('move');

 

If i use mov.style.left it doesn't work anymore. I am putting the var mov as a global variable outside of the functions. It will only work if I create the same variable in both functions.

Link to comment
Share on other sites

I couldn't understand the following, but so long as you solved the problem, no problem, I guess:

 

Solved. Thanks HartleySan. It was the window.onload causing the problem as well as it being initially set in javascript. I had to choose no wrap instead of onload on the side. I've never had that problem before!

 

Also, you can't access the variable mov globally if it's set in the anonymous function reference assigned to the window.onload event handler because mov is a local variable in that case. You could move the mov variable definition to outside the window.onload event handler definition (in other words, actually make it a global variable definition), and then you won't have to declare it twice (which is kind of nice because DOM calls are computationally expensive).

Link to comment
Share on other sites

Not sure what to tell you, but I put your code in an HTML file and it runs fine in Chrome, FF and IE9. Here's the exact code I used. You can copy and paste the following code into a blank HTML file and it should work fine.

 

<!DOCTYPE html>

<html lang="en">

 <head>

   <meta charset="UTF-8">

   <title>setInterval test</title>

   <style>

     #move {

       border: #00F solid 1px;

       position: relative;

       width: 100px;

     }

   </style>

 </head>

 <body>

   <p id="move">MOVING</p>

   <button id="moveM">Move the text</button>

   <script>

     var mov = document.getElementById('move');

     function move() {

       var int = setInterval(function () {

         mov.style.left = parseInt(mov.style.left) + 50 + 'px';

       }, 500);

     }

     window.onload = function () {

       mov.style.left = '0px';

       document.getElementById('moveM').onclick = move;

     };

   </script>

 </body>

</html>

 

Lemme know what you find.

Thanks.

Link to comment
Share on other sites

It's not a bug, it's JS's normal behavior. Nested function definitions have access to variables in the outer functions. As such, you are literally overwriting the old variable if you do that.

Also, I imagine that the reason your code didn't work before has something to do with JSFiddle. I've heard of such things before, but I never use the site, so don't really know.

 

Lastly, as a small piece of advice, I wouldn't name a variable "int". It's not wrong, but it's advisable not to. In the future, if strict typecasting during variable declarations becomes possible in JS, your code will likely break with a variable called "int". Doesn't hurt to plan ahead.

Link to comment
Share on other sites

 Share

×
×
  • Create New...