Skip to content
Browse files

Initial add to git

  • Loading branch information...
0 parents commit ccff11ffc09c73cfa0a6000b314cc0c2d90369b3 @zachstronaut committed Jul 15, 2009
Showing with 184 additions and 0 deletions.
  1. +2 −0 .gitignore
  2. +52 −0 README
  3. +130 −0 jquery-animate-css-rotate-scale.js
2 .gitignore
@@ -0,0 +1,2 @@
+.DS_Store
+*/.DS_Store
52 README
@@ -0,0 +1,52 @@
+-----------------------------
+READ ME
+-----------------------------
+jquery-animate-css-rotate-scale
+Zachary Johnson
+www.zachstronaut.com
+
+This monkey patch for jQuery 1.3.1+ allows you to:
+
+1. Get and set rotate and scale CSS transforms independently with the added
+ custom jQuery methods rotate() and scale().
+
+ Examples:
+ $('#example').rotate('30deg');
+ $('#example').scale(1.5);
+ $('#example').rotate('45deg');
+ $('#example').rotate(); // returns '45deg'
+ $('#example').scale(); // returns '1.5'
+
+2. Animate rotate and scale CSS transforms independently using jQuery's
+ animate() method.
+
+ Examples:
+ $('#example').animate({rotate: '30deg', scale: '1.25'}, 1000);
+ $('#example').animate({rotate: '+=30deg', scale: '-=0.1'}, 1000);
+
+Browser Support
+---------------
+The CSS transform property and therefore this patch currently function in
+Webkit/Safari/Chome and Firefox 3.5.
+
+Using This Patch
+----------------
+Load jquery-animate-css-rotate-scale.js after loading jQuery and
+jquery-css-transform.js. For example:
+
+<script src="jquery.js" type="text/javascript"></script>
+<script src="jquery-css-transform.js" type="text/javascript></script>
+<script src="jquery-animate-css-rotate-scale.js" type="text/javascript></script>
+
+For more information visit:
+http://www.zachstronaut.com/
+
+This code is currently available for use in all personal or commercial projects
+under both MIT and GPL licenses, just like jQuery.
+
+-----------------------------
+Change Log
+-----------------------------
+
+2009.07.15 - Added to GitHub
+
130 jquery-animate-css-rotate-scale.js
@@ -0,0 +1,130 @@
+(function ($) {
+ // Monkey patch jQuery 1.3.1+ to add support for setting or animating CSS
+ // scale and rotation independently.
+ // 2009 Zachary Johnson www.zachstronaut.com
+ var rotateUnits = 'deg';
+
+ $.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];
+ }
+ }
+
+ return 0;
+ }
+
+ var m = val.toString().match(/^(-?\d+(\.\d+)?)(.+)?$/);
+ if (m)
+ {
+ if (m[3])
+ {
+ rotateUnits = m[3];
+ }
+
+ $(this).css(
+ 'transform',
+ style.replace(/none|rotate\([^)]*\)/, '') + 'rotate(' + m[1] + rotateUnits + ')'
+ );
+ }
+ }
+
+ // Note that scale is unitless.
+ $.fn.scale = function (val, duration, options)
+ {
+ var style = $(this).css('transform');
+
+ if (typeof val == 'undefined')
+ {
+ if (style)
+ {
+ var m = style.match(/scale\(([^)]+)\)/);
+ if (m && m[1])
+ {
+ return m[1];
+ }
+ }
+
+ return 1;
+ }
+
+ $(this).css(
+ 'transform',
+ style.replace(/none|scale\([^)]*\)/, '') + 'scale(' + val + ')'
+ );
+ }
+
+ // 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')
+ {
+ return parseFloat($(this.elem).rotate());
+ }
+ 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.scale = function (fx)
+ {
+ $(fx.elem).scale(fx.now);
+ }
+
+ /*
+
+ Starting on line 3905 of jquery-1.3.2.js we have this code:
+
+ // We need to compute starting value
+ if ( unit != "px" ) {
+ self.style[ name ] = (end || 1) + unit;
+ start = ((end || 1) / e.cur(true)) * start;
+ self.style[ name ] = start + unit;
+ }
+
+ This creates a problem where we cannot give units to our custom animation
+ because if we do then this code will execute and because self.style[name]
+ does not exist where name is our custom animation's name then e.cur(true)
+ will likely return zero and create a divide by zero bug which will set
+ start to NaN.
+
+ The following monkey patch for animate() gets around this by storing the
+ units used in the rotation definition and then stripping the units off.
+
+ */
+
+ 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];
+ }
+
+ prop['rotate'] = m[1];
+ }
+
+ return animateProxied.apply(this, arguments);
+ }
+})(jQuery);

0 comments on commit ccff11f

Please sign in to comment.
Something went wrong with that request. Please try again.