jQuery Transit 过渡效果
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 文件
- <script src='jquery.transit.js'></script>
转换属性
除 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(){}
});
jQuery Transit 过渡效果的更多相关文章
- jquery.easing 和 jquery.transit 动画插件的使用
从jQuery API 文档中可以知道,jQuery自定义动画的函数.animate( properties [, duration] [, easing] [, complete] )有四个参数: ...
- 通过jquery.transit.min.js插件,实现图片的移动
首先给出插件:jquery.transit.min.js (function(t,e){if(typeof define==="function"&&define. ...
- jQuery Mobile 过渡效果
jQuery Mobile 包含了允许您选择页面打开方式的 CSS 效果. jQuery Mobile 过渡效果 jQuery Mobile 拥有一系列关于如何从一页过渡到下一页的效果. 注释:如需实 ...
- jQuery Transit
http://code.ciaoca.com/jquery/transit/ jQuery Transit 事件监听 https://developer.mozilla.org/en-US/docs/ ...
- 常用JQUERY插件大全
jQuery内容滚动插件-BoxSlider jQuery artDialog对话框插件 移动端日期选择组件 图像延迟加载库Echo.js 轮播图FlexSlider插件 Slick.js幻灯片使用方 ...
- 期待已久的2012年度最佳jQuery插件揭晓
近日,国外著名博客WDL发布了2012年度最佳 jQuery 插件.jQuery 自2006年发布以来,经过6年的迅速发展,目前已是最流行和使用最广泛的 JavaScript 框架,这主要归功于众多围 ...
- 常用jquery记录
1.jquery easing jQuery Easing是一款比较老的jQuery插件,在很多网站都有应用,尤其是在一些页面滚动.幻灯片切换等场景应用比较多.它非常小巧,且有多种动画方案供选择,使用 ...
- Jquery实现花瓣随机飘落(收藏自慕课网)
这个东西实际上慕课的艾伦大大先写的. 然后别人推荐给我,偶一直收藏着,然后偶再推荐给偶的队友们,然后呢,这帮货就懒得都不肯去看... 接着今天受伤在家就提出来了一点东西放在我博客顶上... 然后艾伦的 ...
- Web 开发最有用的50款 jQuery 插件集锦——《综合篇》
这篇文章是<Web 开发最有用的50款 jQuery 插件集锦>系列的最后一篇,整个系列向大家分享了在网站开发中非常有帮助的 50 款 jQuery 插件,这些插件按用途主要有以下类别:网 ...
随机推荐
- 《Qt Quick 4小时入门》学习笔记
http://edu.csdn.net/course/detail/1042/14804?auto_start=1 Qt Quick 4小时入门 第五章:Qt Quick里的信号与槽 QML中 ...
- SQLSERVER中的ALLOCATION SCAN和RANGE SCAN
SQLSERVER中的ALLOCATION SCAN和RANGE SCAN 写这篇文章的开始,我还不知道ALLOCATION SCAN的工作原理是怎样的,网上资料少得可怜 求助了园子里的某位大侠,他看 ...
- wangEditor——轻量级web富文本框
提示:最新版wangEditor请参见 http://www.wangeditor.com/ 和 https://github.com/wangfupeng1988/wangEditor 交流 ...
- SQL Pass北京举办1周年活动(本次活动特别邀请到了来自微软的SQL Server大师何雷谈数据库职业规划)
地点:北京微软(中国)有限公司[望京利星行],三层308室 时间:2013年 12 月28日 13:30-16:30 SQL PASS 北京QQ群号:2435349 新浪微群地址:http://q.w ...
- mongodb 关系、引用、覆盖索引查询
一.关系 MongoDB 的关系表示多个文档之间在逻辑上的相互联系.文档间可以通过嵌入和引用来建立联系.MongoDB 中的关系可以是:1对1,1对多,多对1,多对多. 一个用户可以用多个地址,这是典 ...
- PhoneGap介绍及简单部署
一.什么是PhoneGap: PhoneGap是一个自由开放源码的开发工具和框架,允许利用HTML + JavaScript + CSS的强大功能在多个手机平台上开发程序,开发出来的程序经过在各自的平 ...
- 反质数问题,求不大于n的最大反质数
反质数:设f(n)表示n个约数的个数,如果对于任意x有0<x<n, f(x) < f(n),那么n就是一个反质数 我们都知道对于任意一个数n,都可以用质数乘积的形式表示出来:x = ...
- Oracle Dataguard之Real-Time Apply
Oracle Dataguard一共支持三种模式:最大可用模式(Maximum Availability),最大性能模式(Maximum Performance),最大保护模式(Maximum Pro ...
- Windows 8(虚拟机环境)安装.NET Framework3.5(includes .NET 2.0 and 3.0)
按照这篇文章:http://blogs.technet.com/b/aviraj/archive/2012/08/04/windows-8-enable-net-framework-3-5-inclu ...
- Tools - 国内开源镜像网站
阿里云镜像 网易开源镜像站 搜狐开源镜像站 香港中文大学 清华大学开源软件镜像站 中国科学技术大学开源软件镜像 中国互联网络信息中心开源镜像站 - apache开源软件镜像