Learning jQuery - Fourth Edition

Taking fine-grained control of animations

Even as we've looked at a number of advanced features, jQuery's effects module offers 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: function(now, tween) {
   // monitor height and width
   // adjust tween properties
  },
  progress: function(animation, progress, remainingMs) {
  }
});

The step() ...