-
Notifications
You must be signed in to change notification settings - Fork 116
zachstronaut/jquery-animate-css-rotate-scale
Folders and files
Name | Name | Last commit message | Last commit date | |
---|---|---|---|---|
Repository files navigation
----------------------------- 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').scale(1.5).rotate('45deg'); // chaining $('#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 CSS3 transform property (and therefore this patch) currently functions in Safari/Chrome/Webkit, Firefox 3.5+, IE 9+, and Opera 11+. 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 ----------------------------- 2012.10.23 - 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 translate), 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. 2010.11.26 - Updated included dependency jquery-css-transform.js to newest version 2010.11.06 - Fixed chaining of scale() and rotate() by returning "this" 2009.07.15 - Added to GitHub
About
A monkey patch for jQuery 1.3.1+ that adds support for setting or animating CSS scale and rotation independently.
Resources
Stars
Watchers
Forks
Packages 0
No packages published