zachstronaut / jquery-animate-css-rotate-scale Goto Github PK
View Code? Open in Web Editor NEWA monkey patch for jQuery 1.3.1+ that adds support for setting or animating CSS scale and rotation independently.
A monkey patch for jQuery 1.3.1+ that adds support for setting or animating CSS scale and rotation independently.
----------------------------- 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
This is more a feature request than an issue, but do you have plans to add support for other translations? TranslateX, TranslateY, etc.
how can I stop animate method?
Hi,
why not returning this, in
Indeed, it would let us use your functions like below :
$("#id").scale(1.5).rotate(60);
Hello,
I think that rotate( ) should return the value of the angle without the unit ("deg"), just like width( ) returns the width without "px". Or maybe there is a reason for it to behave differently ?
Also, the rotate( ) function should accept relative values like "+=20" (your patch on animate( ) does have the right filter to do that).
Sorry I don't fork, I'm new to git and all :)
Thanks for your work !
rotate issue
Can sombody proof
$('#img2').animate({rotate: '+=90deg'}, 900, function() {
});
flop like crazzy in Firefox 16
I recently upgraded to jquery 1.8.2 and afterwards a button that would rotate 45 degrees back and forth now spins completely around and stops at a semi random angle.
here is the code that I'm using
$(element).animate({ "rotate" : value + 'deg' }, { duration: "fast", queue: false });
My bad. Please deleete this issue.
cause: pos results as 1.e-16, which makes the rotateUnits incorrect.
fix:
jquery-animate-css-rotate-scale.js line39
change from:
m = val.toString().match(/^(-?\d+(.\d+)?)(.+)?$/);
to
m = val.toString().match(/^(-?\d+(.\d*e?-?\d+)?)(.+)?$/);
This is currently hosted on CDN.
<script src="https://cdn.jsdelivr.net/jquery.animate-css-rotate-scale/0.9.3/jquery-animate-css-rotate-scale.min.js"></script>
Please mention this in README.md as this is how most people will like to make use of this project.
Are there any plans to add translation?
I have some images that are translated as well as rotated and I want to animate both to 0 (so 0,0 for translate) but right now I can't figure out how to do this so it won't look choppy.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.