PDA

View Full Version : setInterval animation help



dbchristopher
Mar 16th, 2007, 01:17 AM
Hi everyone, I hope this should be an easy problem to fix, but I am absolutely stumped. I want to use the setInterval function to animate a menu sliding down when the user clicks on a link. here's a snippet:

box.timer = window.setInterval(
function() {
box.heightCount++;
if(box.heightCount >= maxHeight) {
window.clearInterval(box.timer);
}
box.style.height = box.heightCount + 'px';

}, 1);

So this works ok in the sense that the animation is performed smoothly. But to my understanding it should expand the height of the box 1pixel every 1ms, so it should expand very quickly from the base height to the maxHeight limit, but I click on the link and it animates soooooo slooooowly -- smoothly, i mean, but it takes well over a minute to expand to the full height. I just need to speed the damn thing up! Also, if i change "box.heightCount++;" to "box.heightCount+=1;" it gets all messed up. What am I missing here?

I'm new to javascript programming, so I have a lot of things to learn, I really hope you can help :D

Arty Effem
Mar 16th, 2007, 01:55 AM
window.setInterval(
function() {
box.heightCount++;
if(box.heightCount >= maxHeight) {
window.clearInterval(box.timer);
}
box.style.height = box.heightCount + 'px';

}, 1);
You're setting an interval of 1ms, but you're never going to get 1000 screen updates in one second. I would not use a value lower than 100, incrementing by an appropriate amount.
Exactly how are you initialising the value of box.heightCount?