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. });
复制

jQuery Transit 过渡效果的更多相关文章

  1. jquery.easing 和 jquery.transit 动画插件的使用

    从jQuery API 文档中可以知道,jQuery自定义动画的函数.animate( properties [, duration] [, easing] [, complete] )有四个参数: ...

  2. 通过jquery.transit.min.js插件,实现图片的移动

    首先给出插件:jquery.transit.min.js (function(t,e){if(typeof define==="function"&&define. ...

  3. jQuery Mobile 过渡效果

    jQuery Mobile 包含了允许您选择页面打开方式的 CSS 效果. jQuery Mobile 过渡效果 jQuery Mobile 拥有一系列关于如何从一页过渡到下一页的效果. 注释:如需实 ...

  4. jQuery Transit

    http://code.ciaoca.com/jquery/transit/ jQuery Transit 事件监听 https://developer.mozilla.org/en-US/docs/ ...

  5. 常用JQUERY插件大全

    jQuery内容滚动插件-BoxSlider jQuery artDialog对话框插件 移动端日期选择组件 图像延迟加载库Echo.js 轮播图FlexSlider插件 Slick.js幻灯片使用方 ...

  6. 期待已久的2012年度最佳jQuery插件揭晓

    近日,国外著名博客WDL发布了2012年度最佳 jQuery 插件.jQuery 自2006年发布以来,经过6年的迅速发展,目前已是最流行和使用最广泛的 JavaScript 框架,这主要归功于众多围 ...

  7. 常用jquery记录

    1.jquery easing jQuery Easing是一款比较老的jQuery插件,在很多网站都有应用,尤其是在一些页面滚动.幻灯片切换等场景应用比较多.它非常小巧,且有多种动画方案供选择,使用 ...

  8. Jquery实现花瓣随机飘落(收藏自慕课网)

    这个东西实际上慕课的艾伦大大先写的. 然后别人推荐给我,偶一直收藏着,然后偶再推荐给偶的队友们,然后呢,这帮货就懒得都不肯去看... 接着今天受伤在家就提出来了一点东西放在我博客顶上... 然后艾伦的 ...

  9. Web 开发最有用的50款 jQuery 插件集锦——《综合篇》

    这篇文章是<Web 开发最有用的50款 jQuery 插件集锦>系列的最后一篇,整个系列向大家分享了在网站开发中非常有帮助的 50 款 jQuery 插件,这些插件按用途主要有以下类别:网 ...

随机推荐

  1. 深入理解CSS径向渐变radial-gradient

    × 目录 [1]定义 [2]椭圆圆心 [3]椭圆类型 [4]椭圆大小 [5]色标 [6]重复渐变 [7]其他 前面的话 上篇介绍了线性渐变,本文接着介绍径向渐变的内容 定义 径向渐变,实际上就是椭圆渐 ...

  2. 小实例窥探dotnet垃圾回收

    今天项目调试时发现VS中有下面这样的现象. 说明,file.ServerLocation是一个完整的物理路径.第三句代码是错误的,保留只是因为它使用了"s"字符串.   个人认为当 ...

  3. 【原创】探索Newlife X组件利器之:XCoder点滴[附下载]

    本博客所有文章分类的总目录:http://www.cnblogs.com/asxinyu/p/4288836.html Newlife XCode组件相关文章目录:http://www.cnblogs ...

  4. Supplemental Logging

    Supplemental Logging分为两种:Database-Level Supplemental Logging和Table-Level Supplemental Logging,即数据库级别 ...

  5. nodejs基于art-template模板引擎生成

    基础核心代码 var template = require('art-template'); var tName = new Date().getTime(); var htmlT = '<!D ...

  6. C#基础-----面向对象

    C#基础-----面向对象(一) 分类: C#基础2015-06-08 14:10 2人阅读 评论(0) 收藏 举报 1,面向对象 什么是面向对象?一个分析问题的方式(增强了程序的可扩展性) 几个名词 ...

  7. 硬刚Google ,这家小公司的增长团队长啥样

    背景: AdRoll 是一家主打重定向广告(Retargeting)服务的技术公司,基于用户浏览记录等信息,为广告主提供几乎瞬时的广告位购买服务,当前估值15.5亿美元.吊打谷歌, AdRoll 已经 ...

  8. Web 前端开发人员和设计师必读文章推荐【系列二十八】

    <Web 前端开发精华文章推荐>2014年第7期(总第28期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 ...

  9. android调试输出

    测试时不想直接debug总要调试输出一些字符串信息,那以下方法可选: 1.用Log.i(TAG, "onCreate");日志输出. 先要引用 import android.uti ...

  10. Dripicons – 精美的扁平风格的免费矢量图标字体

    Dripicons 是一个好看的免费图标集,有超过 90 个扁平风格的图标,适用在 Web 应用程序中使用,如:箭头,媒体,图表等等. 集合多种矢量格式(PSD,AI,EPS,PDF,SVG),也可以 ...