Jump to content

Javascript Animation Isn't Working.


MrFish
 Share

Recommended Posts

I'm trying to make an error bar that slides down from the top of the screen. If I don't put it in a for loop it just appears on the screen where I want it to go, but that's not what I want. I want it to slide down. This does nothing, I also tried putting a function in the setTimeout instead, and I tried it without single quotes, but nothing works.

	function errorbar(text){		var error = document.getElementById('errorbartop');		error.innerHTML = text;		for(i=-20;i<=-1;i++){			setTimeout('error.style.top+1', 100);		}

Link to comment
Share on other sites

'error.style.top+1'This is not an executable statement. Perhaps you mean this:'error.style.top += 1'More important, executing that statement over and over again in a loop will essentially be invisible. I think you're hoping that executing a timeout inside each iteration will create a pause between each iteration. This is not what will happen. Instead, the loop will execute as fast as your processor will allow it (less than a millisecond), and each timeout will immediately overwrite the previous one. All you will see is the final style change, so that your element will appear to jump 20 px all at once. Or it might only move one pixel. Yeah, I think just one, for the final loop iteration.You probably need to revise the function so that it does work when it calls itself with setTimeout. That is the normal way of creating the kind of "delayed recursion" that animates things.May I suggest that you simply get the movement working properly, and THEN adjust the function so that your string gets updated somehow.

Edited by Deirdre's Dad
Link to comment
Share on other sites

Well, if there is no pause in between then setTimeout isn't doing it's job. If I make it 100 miliseconds between each movement why will it go as fast as my processor will allow?

Link to comment
Share on other sites

I guess I haven't explained clearly.setTimeout() does not delay the execution of the script or the function that it's in. It sets a timer, and when the timer goes off, the string that is passed to setTimeout (or a function reference, if you do it that way) gets executed. It's kind of like threading, if that concept means something to you. Maybe a diagram will help:

Execute Original Function:	statement	setTimeout ----------> wait	statement			  wait	statement			  wait	statement			  wait	statement			  Execute Timeout Function	statement				  statement	statement				  statementEnd Original Function		  statement							   statement							  statement							  statement						  End Timeout Function

The idea is that the statements in the original function continue to run. In this case, that's your loop, and since all you're doing is counting, elapsed time will be almost instantaneous. What is being delayed is the timeout function. But since your loop reinitializes the timeout function with every iteration, it will only run once. Something like this:

var counter = 0;AnimationFunction:	if counter == 20		counter = 0		return	move my element	setTimeout (AnimationFunction, 100)	counter++End Animation Function:

Remember, that's in human code, not true JavaScript.

Edited by Deirdre's Dad
Link to comment
Share on other sites

Well, if there is no pause in between then setTimeout isn't doing it's job.
Like everything else a computer does, it's doing exactly what you're telling it to do, no more and no less.
If I make it 100 miliseconds between each movement why will it go as fast as my processor will allow?
To put it simply, since you are using setTimeout inside a loop you are queuing up 20 functions to run starting in 100ms. They aren't going to run 100ms apart, that's not what you're doing, you're queuing them all up to run immediately after each other, and the whole thing starts in 100ms. If you want to queue them all up in a single loop, keep adding time to the 100ms, have one start at 100ms, then the next at 110, then 120, etc. Or do like Dad shows and have the animate function decide whether or not it needs to run again.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...