score:0

Accepted answer

not possible to pause execution at a line of code or wait for an animation to complete.

yes, that's true, since animations in js are asynchronous. you have 2 choices:

  • make your algorithm asynchronous as well. this would be a function that gets the current state of the algorithm and returns the state after one step (and/or possibly the step itself so the matching single animation can be chosen). the step function would then be called from the animation loop each time.
  • maintain an animation queue (i guess your libraries have helper functions for that). then run your algorithm as it is, and in each step chain another animation-to-be-executed at the end of the queue. once the algorithm is ran, start the animation queue.

option #1 is more elegant, but of course more complicated - all loops will need to become recursive functions etc. yet this is the only possibility if your algorithm is non-terminating, or the animation queue of option #2 would become too long (and memory-eating).

score:1

to simulate an animation in javascript, you could modify inline style properties over time.

for example, to make a div element move to the right linearly, you might do something like this:

var div = document.getelementbyid("some-div");

//this would normally be done elsewhere
div.style.position = "absolute";
div.style.width = "100px;"
div.style.height = "100px;"
div.style.left = "0px";

//called every 30 milliseconds
function animate() {
    div.style.left = (parseint(div.style.left,10) + 5) + "px";
    settimeout(function() {
       animate();
    }, 30);
}
animate();

however, i'd advise you look into using css3 transitions or animations, as it separates the site logic from the presentation and uses much less code.

score:1

now this is a really wide question to answer but i will try to cover some aspects of it ..

id like to start with the creation of animation ..

normally you would be manipulating the css of some element in order for it to look like it's an animation .. i would be playing with firebug and increasing the width of a div element and if i keep holding the up arrow it will look like its expanding .. further more , complex animations involve more aspects .. jquery library provide you with some really cool animations out of the box , and there are more advanced ones to see here is a simple fade-out animation if im not going to use jquery fadeout() function

var op = 1; // set opacity to one 

setinterval(function(){
  op = op - 0.1 // decrease the opacity by 0.1
  $('div').css({opacity : op  }); // selecting the element an apply the css on it 
},50) // over an interval of 50 ms

now about stopping an animation or pausing it , nothing is impossible ... with the previous animation here is an example .. http://jsfiddle.net/9sakl/1/

further more cool stuff can be done .. but this is just a lame example (don't apply it to real life project lol)

note that there is no use of re-inviting the wheel tons of animations can be done with just the basic ones used and combined together

i realize that its not really possible in javascript to pause execution at a line of code (or wait) for an animation to complete.

totally wrong , chaining is basically wating for one function to finish and then doing the other ... clearing an interval is stopping ..

in real life if there is time and there is some thing that can be done on time then you can speed it or make it slower or you can stop it , (except time huh?)


Related Query

More Query from same tag