A simple convenience method to bind single-use callbacks to the end of transition effects, making chaining transitions a little less callback-hellish.

jquery.transitionevents.js

// convenience method for applying a transition class, with a callback
// usage:
// $('div.foo').transition('zoomed', function(){ console.log('your div is now zoomed!'); });
// $('div.bar.faded').transition('!faded', function(){ console.log('your div is no longer faded'); });

jQuery.fn.transition = function(className, callback) {
  var element = $(this),
      transitionEndEvents = 'webkitTransitionEnd mozTransitionEnd msTransitionEnd oTransitionEnd transitionEnd transitionend',      
      transitionCallback = function transitionCallback(){
        element.unbind(transitionEndEvents);
        if (typeof callback === "function") callback();
      };
  
  switch (className.indexOf("!")) {
    case 0:
      element.removeClass(className.substring(1)).on(transitionEndEvents, transitionCallback);
      break;
    default:
      element.addClass(className).on(transitionEndEvents, transitionCallback);
      break;
  }
};

For your next exercise: rewrite this to make use of jQuery.Deferred objects.