Wednesday, March 2, 2011

jQuery Animations Run in Parallel

I said something wrong in class today (well, every day, but this time I noticed it). When you run animations in jQuery they will appear to run in parallel. For example, this code:

$(document).ready(
  $('li').click(function() {
   $('#title').hide('slow');
   $('li').hide('slow');
  })
);

will make the title and line items appear to disappear in parallel. You can see it action and view the source code (jquery-test.html and script2.js)

The reason the appear to run in parallel, even thought there are no threads involved, is that the way the animation are implemented are by successive callbacks from setInterval. In reality, what is happening is that the first animation moves to the next 'frame', then second one moves one frame, then back to the first and so on. Pretty cool. If you want one animation to start at the end of the other you will have to use setTimeout to tell the second one to start later.

No comments:

Post a Comment