jQueryTransit过渡效果
jQuery Transit 使用 CSS3 的新特性来实现过渡效果，比默认的.animate方法要顺畅得多。
公司主营业务：成都网站制作、网站设计、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。创新互联是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联推出昌邑免费做网站回馈大家。
因为使用 CSS3 进行过渡效果，所以对不支持 CSS3 的浏览器效果有所下降。
语法和.animate方法相同，因此很好上手。
版本：
jQuery v1.4+
jQuery Transit v0.9.12
为 jQuery 的 .css 方法支持以下属性：
x (px)
y (px)
translate (x, y)
rotate (deg)
rotateX (deg)
rotateY (deg)
rotate3d (x, y, z, deg)
scale (x, [y])
perspective (px)
skewX (deg)
skewY (deg)
PS：对于使用连接符的属性需改为驼峰式写法，或者使用引号包括。如：padding-top属性需写为：paddingTop或者"padding-top"。
在线实例
下载 jQuery Transit 过渡效果 基础示例
使用方法
载入 JavaScript 文件
转换属性
除 jQuery 原本支持的属性外，还新支持一些属性
下载
（使用.css方法不会进行动画效果，只是直接改变值）
$("#box").css({ x: '30px'}); // 向右移动$("#box").css({ y: '60px'}); // 向下移动$("#box").css({ translate: [60, 30]}); // 向右下移动$("#box").css({ rotate: '30deg'}); // 顺时针旋转$("#box").css({ scale: 2}); // 放大2倍 (200%)$("#box").css({ scale: [2, 1.5]}); // 宽度和高度不同的放大$("#box").css({ skewX: '30deg'}); // 水平斜切$("#box").css({ skewY: '30deg'}); // 垂直斜切$("#box").css({ perspective: 100, rotateX: 30}); // Webkit 3d 旋转$("#box").css({ rotateY: 30});$("#box").css({ rotate3d: [1, 1, 0, 45]});
支持相对值
下载
$("#box").css({ rotate: '+=30' }); // 增加30度$("#box").css({ rotate: '-=30' }); // 减少30度
可以省略单位
$("#box").css({ x: '30px' });$("#box").css({ x: 30 });
多个值时，可以是数组或者用逗号分隔
$("#box").css({ translate: [60,30] });$("#box").css({ translate: ['60px','30px'] });$("#box").css({ translate: '60px,30px' });
支持获取属性值
下载
（若属性有多个值，则返回数组）
$("#box").css('rotate'); //=> "30deg"$("#box").css('translate'); //=> ['60px', '30px']
动画效果 - $.fn.transition
$('...').transition(options, [duration], [easing], [complete])
你可以使用$.fn.transition()来进行 css3 动画效果
下载
。他和$.fn.animate()的效果一样，只是他使用了 css3 过渡。
$("#box").transition({ opacity: 0.1, scale: 0.3 });$("#box").transition({ opacity: 0.1, scale: 0.3 }, 500); // 动画时长$("#box").transition({ opacity: 0.1, scale: 0.3 }, 'swing'); // 缓动效果$("#box").transition({ opacity: 0.1, scale: 0.3 }, 500, 'linear'); // 动画时长 + 缓动效果$("#box").transition({ opacity: 0.1, scale: 0.3 }, function(){}); // 回调函数$("#box").transition({ opacity: 0.1, scale: 0.3 }, 500, 'linear', function(){}); // 任意
也可以在参数中配置所有选项
$("#box").transition({opacity: 0.1, scale: 0.3,duration: 500,easing: 'linear',complete: function(){}});
当前名称：jQueryTransit过渡效果
分享地址：http://pwwzsj.com/article/iecedc.html
