jquery.animate.js

/*globals $ */

/*
 * Patches the jQuery-animate method to use CSS-transitions when possible.
 *
 * - Depends on $.transit: http://ricostacruz.com/jquery.transit/
 * - Degrades gracefully to the original method when transitions aren't supported.
 * - Provides fallbacks for translateX/Y's, so { x:10, y:10 } (very smooth) will become { top:10, left:10 } (less smooth) for less capable browsers.
 * - 3d-transforms could be enabled with enable3d:true. Example: { x:100, enable3d:true }
 * - Transitions could be disabled with enableTransitions:false. Example: { x:100, enableTransitions:false }
 */

(function() {
  "use strict";

  var jqAnimate = $.fn.animate;

  $.fn.animate = function() {
    var args;

    if( supported(arguments) ) {
      args = prepArgs('transit', arguments);
      $(this).transit.apply($(this), args);
    } else {
      args = prepArgs('jquery', arguments);
      jqAnimate.apply(this, args);
    }
  };

  function supported(args) {
    if(!$.support.transition)
      return false;

    // disabled by argument
    if(args[0].enableTransitions === false || (args[1] && args[1].enableTransitions === false))
      return false;

    // Scroll-animation is not supported
    if(typeof args[0].scrollTop !== 'undefined')
      return false;

    // show/hide/toggle-values are not supported
    for(var key in args[0]) {
      if($.inArray(args[0][key], ['show', 'hide', 'toggle']) > -1)
        return false;
    }

    return true;
  }

  function prepArgs(type, args) {
    if(typeof args[0] !== 'object')
      return args;

    // Transit-specific properties
    if(type === 'transit') {
      // Shortcut to enable 3d-transforms
      if(typeof args[0].rotate3d === 'undefined' && args[0].enable3d === true)
        args[0].rotate3d = '0,0,0,0deg';
    }

    // jQuery-specific properties
    if(type === 'jquery') {
      // Fallback for 2d-transforms
      if(typeof args[0].x !== 'undefined') args[0].left = args[0].x;
      if(typeof args[0].y !== 'undefined') args[0].top  = args[0].y;
      delete args[0].x;
      delete args[0].y;
    }

    // Cleaning up extra properties
    delete args[0].enable3d;
    delete args[0].enableTransitions;

    // Done
    return args;
  }

})();