Animation help... pulling my hair out on this one

[scottkim]

Hey, I'm a relative newbie to javascript animation, any help woudl be
greatly appreciated.

I'm use setTimeout to do some animation... basic sequence of events:
function moveBalloon(div, xdiff, ydiff, evX) {
move_top = ydiff/10;
move_left = xdiff/10;
div.style.top = parseInt(div.style.top) + move_top;
div.style.left = parseInt(div.style.left) + move_left;
if(parseInt(div.style.left) < evX) {
the_timeout = setTimeout(moveBalloon(div, xdiff, ydiff, evX), 1000);
}
}

I know this code isn't optimized, but who cares... I'm just trying this
out.

When this runs, the div layer (aptly named div), just zooms over to the
new location properly without seeming to wait. I'm using this as part
of a firefox extension, would that be the problem?

Thanks,
Scott

 

[scottkim]

I tried that, but it didn't help. The balloon gets to the right place,
but just not in an animated fashion.... thus even with "px" at the end,
it's getting there correctly.

 

[scottkim]

I meant "thus even withOUT the "px" at the end, it's getting there
correctly.

 

[RobG]

Hey, I'm a relative newbie to javascript animation, any help woudl be
greatly appreciated.

I'm use setTimeout to do some animation... basic sequence of events:
function moveBalloon(div, xdiff, ydiff, evX) {
move_top = ydiff/10;
move_left = xdiff/10;

If these don't need to be global, keep them local.

var move_top = ydiff/10;
var move_left = xdiff/10;

This will generate floats for move_top/left unless they are even
multiples of 10 which may cause problems in some browsers.

div.style.top = parseInt(div.style.top) + move_top;
div.style.left = parseInt(div.style.left) + move_left;

As previously suggested, add 'px' to these values. Round move_top/left
when calculating them or develop an algorithm to ensure the balloon is
moved to the right spot in steps of integer px.

div.style.top = parseInt(div.style.top) + move_top + 'px';
div.style.left = parseInt(div.style.left) + move_left + 'px';

if(parseInt(div.style.left) < evX) {
the_timeout = setTimeout(moveBalloon(div, xdiff, ydiff, evX), 1000);

The first parameter to setTimeout should be a string argument that is
executed after the specified delay - you are executing the function
instead. Try:

the_timeout = setTimeout( function() {
moveBalloon(div, xdiff, ydiff, evX)
}, 1000);

You could also try;

the_timeout = setTimeout('moveBalloon('
+ div + ', '
+ xdiff + ', '
+ ydiff + ', '
+ evX + ')', 1000);

}
}

I know this code isn't optimized, but who cares... I'm just trying this
out.

There may be issues with closures and memory leaks (IE) in the above,
you may want to consider creating a 'balloon' object that you initialise
with relevant values and call with balloon.move().