Delegate .transition() calls to .animate()

[mynameisrufus]

I had todo something a little extra to get this to work but not sure if you want documented so did not fork gh-pages:

    var delegate = function() {
      $.fn.transition = $.fn.animate

      var hooks = [['x', 'left'], ['y', 'top']]

      hooks.forEach(function(hook, index) {
        $.fx.step[hook[0]] = function(fx){
          $.cssHooks[hook[0]].set( fx.elem, fx.now + fx.unit );
        }

        $.cssHooks[hook[0]] = {
          get: function(elem, computed, extra) {
            return $.css(elem, hook[1]);
          },
          set: function(elem, value) {
            elem.style[hook[1]] = value;
          }
        }
      })
    }

    if (!$.support.transition) delegate()

[joestrong]

How come the documentation states that $.fn.transition = $.fn.animate should just work? The 'x' value doesn't automatically get mapped to 'left' for use with animate.

I did the above, but I changed the forEach to $.each to support IE7 & IE8 Also, I mapped transitionStop to stop, for use with the transitionStop code from: https://github.com/rstacruz/jquery.transit/pull/110

var delegate = function() {
  $.fn.transition = $.fn.animate;
  $.fn.transitionStop = $.fn.transitStop = $.fn.stop;

  var hooks = [['x', 'left'], ['y', 'top']];

  $.each(hooks, function(index, hook) {

    $.fx.step[hook[0]] = function(fx){
      $.cssHooks[hook[0]].set( fx.elem, fx.now + fx.unit );
    };

    $.cssHooks[hook[0]] = {
      get: function(elem, computed, extra) {
        return $.css(elem, hook[1]);
      },
      set: function(elem, value) {
        elem.style[hook[1]] = value;
      }
    };

  });
}

if (!$.support.transition) delegate();