温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

jQuery Transit 过渡效果

发布时间:2020-05-30 10:02:14 来源:网络 阅读:568 作者:rr57d751a02b3e6 栏目:web开发

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 文件

  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'] 

动画效果 - $.fn.transition

  1. $('...').transition(options, [duration], [easing], [complete])

你可以使用$.fn.transition()来进行 css3 动画效果

下载

。他和$.fn.animate()的效果一样,只是他使用了 css3 过渡。

  1. $("#box").transition({ opacity: 0.1, scale: 0.3 }); 

  2. $("#box").transition({ opacity: 0.1, scale: 0.3 }, 500);                             // 动画时长 

  3. $("#box").transition({ opacity: 0.1, scale: 0.3 }, 'swing');                         // 缓动效果 

  4. $("#box").transition({ opacity: 0.1, scale: 0.3 }, 500, 'linear');                   // 动画时长 + 缓动效果 

  5. $("#box").transition({ opacity: 0.1, scale: 0.3 }, function(){});                    // 回调函数 

  6. $("#box").transition({ opacity: 0.1, scale: 0.3 }, 500, 'linear', function(){});     // 任意 

也可以在参数中配置所有选项

  1. $("#box").transition({ 

  2.   opacity: 0.1, scale: 0.3, 

  3.   duration: 500, 

  4.   easing: 'linear', 

  5.   complete: function(){} 

  6. });


向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI