Jump to content
Larry Ullman's Book Forums
Sign in to follow this  
benjamin.morgan

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?

Share this post


Link to post
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';

Share this post


Link to post
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.

Share this post


Link to post
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).

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...