135 lines
3.6 KiB
JavaScript
135 lines
3.6 KiB
JavaScript
|
(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';
|
||
|
|
|
||
|
|
$.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 + ')'
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
return this;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 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 + ')'
|
||
|
|
);
|
||
|
|
|
||
|
|
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')
|
||
|
|
{
|
||
|
|
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);
|