Firefox 16 transform style returns a matrix rather than a string of transform functions. This broke the features of this jQuery patch in Firefox 16. It should be possible to parse the matrix for both scale and rotate (especially when scale is the same for both the X and Y axis), however the matrix does have disadvantages such as using its own units and also 45deg being indistinguishable from 45+360deg. To get around these issues, this patch tracks internally the scale, rotation, and rotation units for any elements that are .scale()'ed, .rotate()'ed, or animated. The major consequences of this are that 1. the scaled/rotated element will blow away any other transform rules applied to the same element (such as skew or scale), and 2. the scaled/rotated element is unaware of any preset scale or rotation initally set by page CSS rules. You will have to explicitly set the starting scale/rotation value.

Author: zachstronaut

jquery-animate-css-rotate-scale.js

@@ -1,98 +1,92 @@
+/*!
+/**
+ * Monkey patch jQuery 1.3.1+ to add support for setting or animating CSS
+ * scale and rotation independently.
+ * https://github.com/zachstronaut/jquery-animate-css-rotate-scale
+ * Released under dual MIT/GPL license just like jQuery.
+ * 2009-2012 Zachary Johnson www.zachstronaut.com
+ */
 (function ($) {
-    // Monkey patch jQuery 1.3.1+ to add support for setting or animating CSS
-    // scale and rotation independently.
-    // 2009-2010 Zachary Johnson www.zachstronaut.com
     // Updated 2010.11.06
-    var rotateUnits = 'deg';
+    // Updated 2012.10.13 - Firefox 16 transform style returns a matrix rather than a string of transform functions.  This broke the features of this jQuery patch in Firefox 16.  It should be possible to parse the matrix for both scale and rotate (especially when scale is the same for both the X and Y axis), however the matrix does have disadvantages such as using its own units and also 45deg being indistinguishable from 45+360deg.  To get around these issues, this patch tracks internally the scale, rotation, and rotation units for any elements that are .scale()'ed, .rotate()'ed, or animated.  The major consequences of this are that 1. the scaled/rotated element will blow away any other transform rules applied to the same element (such as skew or scale), and 2. the scaled/rotated element is unaware of any preset scale or rotation initally set by page CSS rules.  You will have to explicitly set the starting scale/rotation value.
 
-    $.fn.rotate = function (val)
-    {
-        var style = $(this).css('transform') || 'none';
-        
-        if (typeof val == 'undefined')
-        {
-            if (style)
-            {
-                var m = style.match(/rotate\(([^)]+)\)/);
-                if (m && m[1])
-                {
-                    return m[1];
-                }
-            }
+    function initData($el) {
+        var _ARS_data = $el.data('_ARS_data');
+        if (!_ARS_data) {
+            _ARS_data = {
+                rotateUnits: 'deg',
+                scale: 1,
+                rotate: 0
+            };
 
-            return 0;
+            $el.data('_ARS_data', _ARS_data);
+        }
+        
+        return _ARS_data;
+    }
+    
+    function setTransform($el, data) {
+        $el.css('transform', 'rotate(' + data.rotate + data.rotateUnits + ') scale(' + data.scale + ',' + data.scale + ')');
+    }
+    
+    $.fn.rotate = function (val) {
+        var $self = $(this), m, data = initData($self);
+                        
+        if (typeof val == 'undefined') {
+            return data.rotate + data.rotateUnits;
         }
 
-        var m = val.toString().match(/^(-?\d+(\.\d+)?)(.+)?$/);
-        if (m)
-        {
-            if (m[3])
-            {
-                rotateUnits = m[3];
+        m = val.toString().match(/^(-?\d+(\.\d+)?)(.+)?$/);
+        if (m) {
+            if (m[3]) {
+                data.rotateUnits = m[3];
             }
 
-            $(this).css(
-                'transform',
-                style.replace(/none|rotate\([^)]*\)/, '') + 'rotate(' + m[1] + rotateUnits + ')'
-            );
+            data.rotate = m[1];
+            
+            setTransform($self, data);
         }
 
         return this;
-    }
+    };
 
     // Note that scale is unitless.
-    $.fn.scale = function (val, duration, options)
-    {
-        var style = $(this).css('transform');
+    $.fn.scale = function (val) {
+        var $self = $(this), data = initData($self);
 
-        if (typeof val == 'undefined')
-        {
-            if (style)
-            {
-                var m = style.match(/scale\(([^)]+)\)/);
-                if (m && m[1])
-                {
-                    return m[1];
-                }
-            }
-            
-            return 1;
+        if (typeof val == 'undefined') {
+            return data.scale;
         }
 
-        $(this).css(
-            'transform',
-            style.replace(/none|scale\([^)]*\)/, '') + 'scale(' + val + ')'
-        );
+        data.scale = val;
+        
+        setTransform($self, data);
 
         return this;
-    }
+    };
 
     // fx.cur() must be monkey patched because otherwise it would always
     // return 0 for current rotate and scale values
     var curProxied = $.fx.prototype.cur;
-    $.fx.prototype.cur = function ()
-    {
-        if (this.prop == 'rotate')
-        {
+    $.fx.prototype.cur = function () {
+        if (this.prop == 'rotate') {
             return parseFloat($(this.elem).rotate());
-        }
-        else if (this.prop == 'scale')
-        {
+            
+        } else if (this.prop == 'scale') {
             return parseFloat($(this.elem).scale());
         }
 
         return curProxied.apply(this, arguments);
-    }
+    };
 
-    $.fx.step.rotate = function (fx)
-    {
-        $(fx.elem).rotate(fx.now + rotateUnits);
-    }
+    $.fx.step.rotate = function (fx) {
+        var data = initData($(fx.elem));
+        $(fx.elem).rotate(fx.now + data.rotateUnits);
+    };
 
-    $.fx.step.scale = function (fx)
-    {
+    $.fx.step.scale = function (fx) {
         $(fx.elem).scale(fx.now);
-    }
+    };
 
     /*
     
@@ -117,19 +111,18 @@
     */
 
     var animateProxied = $.fn.animate;
-    $.fn.animate = function (prop)
-    {
-        if (typeof prop['rotate'] != 'undefined')
-        {
-            var m = prop['rotate'].toString().match(/^(([+-]=)?(-?\d+(\.\d+)?))(.+)?$/);
-            if (m && m[5])
-            {
-                rotateUnits = m[5];
+    $.fn.animate = function (prop) {
+        if (typeof prop['rotate'] != 'undefined') {
+            var $self, data, m = prop['rotate'].toString().match(/^(([+-]=)?(-?\d+(\.\d+)?))(.+)?$/);
+            if (m && m[5]) {
+                $self = $(this);
+                data = initData($self);
+                data.rotateUnits = m[5];
             }
 
             prop['rotate'] = m[1];
         }
 
         return animateProxied.apply(this, arguments);
-    }
-})(jQuery);
+    };
+})(jQuery);