Taking fine-grained control of animations

Even though we've looked at a number of advanced features, jQuery's effects module has much more to explore. A rewrite of this module for jQuery 1.8 introduced a number of ways for advanced developers to fine-tune various effects and even change the underlying engine that drives the animations. For example, in addition to offering options such as duration and easing, the .animate() method provides a couple of callback options that let us inspect and modify an animation each step of the way:

$('#mydiv').animate({ 
  height: '200px', 
  width: '400px' 
}, { 
  step(now, tween) { 
   // monitor height and width 
   // adjust tween properties 
  }, 
  progress(animation, progress, remainingMs) {} 
}); 

The step() function, which is called roughly once every 13 milliseconds for each animated property during the animation, allows us to adjust...