Animation does not get drawn in javascript?

Question

I know there is a .animate() function in jQuery, however i want to play around writing my own!

Ive got this script:

var ball = $("#ball");
var p = $("#ball").position();

for(;;){
    $("#ball").css("left", ++p.left);
    if ( p.left == 400 ){
        break;
    }
}

with these elements:

#board { height:500px; width:500px; background-color: gray; position:relative;}
#ball{ height: 50px; width:50px; background-color: red; position:absolute;}

<div id="board">
    <div id="ball"></div>
</div>

Now what i wanna see when i open the browser, is the little red box run from left to right and stop at 400.

However when i load the page, the box is ALREADY at 400, so it skips the animation.

Essentially, i need the browser to draw each interation of the left co-ordinate.

How to i force the broswer to re-draw?

You might want to add some delay, as your computer is finished counting to 400 before you can blink your eyes... — Veger, Jun 08 '12 at 12:26
Dude, that snippet's an obscene performance killer... Use `ball` instead of calling jQuery for each frame! — MaxArt, Jun 08 '12 at 12:28
It was just an example, i've not optimised it! and how do i delay javascript? — AlexMorley-Finch, Jun 08 '12 at 12:29

score 0 · Answer 1 · answered Jun 08 '12 at 12:32

0

Browser does not redraw the page until after the JS execution has finished. You need to use setTimeout() (or requestAnimationFrame()) to paint distinct frames.

answered Jun 08 '12 at 12:32

Alexander Pavlov

31,598
5
67
93

Not `setTimeout`, but `setInterval`. The difference is essential, here. – MaxArt Jun 08 '12 at 12:36
settimeout is better for animations, and requestAnimationFrame() is for html5. – ymutlu Jun 08 '12 at 12:38
[setTimeout() or setInterval()](http://stackoverflow.com/questions/729921/settimeout-or-setinterval). I also heard that certain browsers, after the system has been suspended with setInterval scheduled, and then resumed, will fire the function an awful lot of times to "catch up" with the delay. Hopefully, this is no longer true for the latest browser versions. – Alexander Pavlov Jun 08 '12 at 12:42

U.P · Accepted Answer · 2012-06-08T13:33:20.647

0

Just used setInterval and it works.

var ball = $("#ball");
var p = $("#ball").position();
var i = 1000;
for(;;){
    //setInterval(myFunction, i);
    setTimeout(myFunction, i);
    i+= 100;

    if ( i> 10000 ){
        break;
    }
}
function myFunction(){
    $("#ball").css("left", ++p.left);
}

It is a dirty piece of code so do optimize it in case you want to go with it.

Update: I meant to use setTimeout not setInterval

edited Jun 08 '12 at 13:33

answered Jun 08 '12 at 12:38

U.P

7,357
7
39
61

there is million zillion of intervals, you can't handle intervals like that. – ymutlu Jun 08 '12 at 12:47
I said it is not optimized. Just tried to show how it works with Intervals. Besides (10000 - 1000 ) / 100 = 90 Intervals in this code, not million or zillion. – U.P Jun 08 '12 at 13:00
put a global varaible and inc it in your function, and wait for 10sec and see how it grows. – ymutlu Jun 08 '12 at 13:05

ymutlu · Answer 3 · 2012-06-08T12:54:49.407

posted an example for you hope this helps.

http://jsfiddle.net/ymutlu/J2cHn/1/

var ball = $("#ball");
var p = $("#ball").position();


    //$("#ball").css("left", 10+p.left);

    function moveBallDest(){
       var p = $("#ball").position();
       $("#ball").css("left", 10+p.left);
        if ( p.left >= 400 ){
            return;
        }else{
            setTimeout(moveBallDest,1000);
        }
    }

    setTimeout(moveBallDest,1000);

score -1 · Answer 4 · answered Jun 08 '12 at 12:40

-1

Try this-

<style>
 #board { height:500px; width:500px; background-color: gray; position:relative;}
 #ball{ height: 50px; width:50px; background-color: red; position:absolute;}
</style>
<script>
 $(document).ready(function(){
   $("#ball").animate({left:"400px"},"slow");
 });
</script>
<div id="board">
  <div id="ball"></div>
</div>

It will work.

answered Jun 08 '12 at 12:40

NewUser

289
2
14

I know it will work. If you read the description, I DIDN'T want .animate() – AlexMorley-Finch Jun 08 '12 at 13:07

Animation does not get drawn in javascript?

4 Answers4