jQuery Tween
This is a jquery plugin provides a stylish and unified animation for your browser based app. This plugin is designed to work on modern browsers including smartphone browsers in addition to old browsers such as IE 6-8. 　
 |  |  |  |  |  |  | |  | |
|---|---|---|---|---|---|---|---|---|---|
| x |  | | | | | | | | |
| y | | | | | | | | | |
| z | | |  | | | | | | |
| rotate | | | | | | | | | |
| rotatex | | | | | | | | | |
| rotatey | | | | | | | | | |
| rotatez | | | | | | | | | |
| scale | | | | | | | | | |
| scalex | | | | | | | | | |
| scaley | | | | | | | | | |
| skew | | | | | | | | | |
| skewx | | | | | | | | | |
| skewy | | | | | | | | | |
CHROME | FF | SAFARI | OPERA | IE10 | IE9 | IE8 | IE7 | IE6 |
Require
- jQuery 1.4.3+
- jquery.easing.1.3.js
Usage
You can take advantage of knowledge of jquery of you.
<div class="any"></div> <script src="jquery.js"></script> <script src='jquery.easing.1.3.js'></script> <script src='jquery.tween.js'></script> <script type="text/javascript"> var props = { x: 100, // translate on x-axis rotate: 45, // rotate on z-axis scale: 2, // scale on xy-axis skew: 45, // skew on xy-axis width: 100, // able to transform css properties opacity: 0 }; $('.any').tween(props [,duration] [,easing] [,callback]); </script>Notes
IE6-9
- Using margin is not allowed. If you set margin, it would be overrided with 0. It is used for fixing bug of origin.
IE6-9 and Opera
- Using (rotatex|rotatey) and (scale|scalex|scaley) at the same time is not allowed.
- Using transform origin is not allowed.
License
Copyright (c) 2012-2015 Satoshi Okami. See the LICENSE file for license rights and limitations (MIT).
