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 properties of the tween object such as the end value, the type of easing, or the actual property being animated based...