jQuery Transit 过渡效果

载入 JavaScript 文件

1. <script src='jquery.transit.js'></script>

除 jQuery 原本支持的属性外，还新支持一些属性（使用.css方法不会进行动画效果，只是直接改变值）

1. $("#box").css({ x: '30px'});                        // 向右移动 
2. $("#box").css({ y: '60px'});                        // 向下移动 
3. $("#box").css({ translate: [60, 30]});              // 向右下移动 
4. $("#box").css({ rotate: '30deg'});                  // 顺时针旋转 
5. $("#box").css({ scale: 2});                         // 放大2倍 (200%) 
6. $("#box").css({ scale: [2, 1.5]});                  // 宽度和高度不同的放大 
7. $("#box").css({ skewX: '30deg'});                   // 水平斜切 
8. $("#box").css({ skewY: '30deg'});                   // 垂直斜切 
9. $("#box").css({ perspective: 100, rotateX: 30});    // Webkit 3d 旋转 
10. $("#box").css({ rotateY: 30}); 
11. $("#box").css({ rotate3d: [1, 1, 0, 45]}); 

支持相对值

1. $("#box").css({ rotate: '+=30' });        // 增加30度 
2. $("#box").css({ rotate: '-=30' });        // 减少30度 

可以省略单位

1. $("#box").css({ x: '30px' }); 
2. $("#box").css({ x: 30 }); 

多个值时，可以是数组或者用逗号分隔

1. $("#box").css({ translate: [60,30] }); 
2. $("#box").css({ translate: ['60px','30px'] }); 
3. $("#box").css({ translate: '60px,30px' }); 

支持获取属性值（若属性有多个值，则返回数组）

1. $("#box").css('rotate');     //=> "30deg" 
2. $("#box").css('translate');  //=> ['60px', '30px']