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. 30分钟全面解析-图解AJAX原理

    先上原理图: 高清无码图在这里:点我查看大图!!! 背景: 1.传统的Web网站,提交表单,需要重新加载整个页面. 2.如果服务器长时间未能返回Response,则客户端将会无响应,用户体验很差. 3 ...

  2. 移动web开发之视口viewport

    × 目录 [1]布局视口 [2]视觉视口 [3]理想视口[4]meta标签[5]总结 前面的话 在CSS标准文档中,视口viewport被称为初始包含块.这个初始包含块是所有CSS百分比宽度推算的根源 ...

  3. 使用Unity3D Asset Server进行联合开发和版本控制

    前言:感觉在功能方面,其实Github更加强大易用,但是鉴于网络延迟问题,学一下AssetServer也是不错的.关于Asset Server的搭建步骤,其实官网论坛上已经有了解释得比较详细明了,在这 ...

  4. 【Spring】Spring AOP实现原理

    Spring AOP实现原理 在之前的一文中介绍过Spring AOP的功能使用,但是没有深究AOP的实现原理,今天正好看到几篇好文,于是就自己整理了一下AOP实现的几种方式,同时把代理模式相关知识也 ...

  5. 对于placeholder浏览器兼容性(包括密码输入框)解决办法

    将以下脚本和样式引入你的页面(对于密码输入框,要设置ID属性值): <script type="text/javascript"> $(function () { // ...

  6. Android中BroadcastReceiver广播

    BroadCastReceiver 简介 广播接收者( BroadcastReceiver )用于接收广播 Intent ,广播 Intent 的发送是通过调用 Context.sendBroadca ...

  7. IIS 服务器下载apk文件报404错

    文件路径什么都对,可就是提示404错误,最后问题出在了IIS的MIME上,按照下面的办法即可解决. 1.在 IIS 管理器中,右键单击要为其添加 MIME 类型的网站或网站目录,单击"属性& ...

  8. J2EE修炼之四书五经[转自2004年程序员]

    J2EE修炼之四书五经 作者:彭晨阳 J2EE其实没有四书五经,因为J2EE一直如汹涌澎湃的大江,推陈出新,不断高速发展,这是一种带领我们走向未来的技术.当然,如何在这种气势如虹的潮流之中不至于迷失方 ...

  9. 利用bootstrap的modal组件自定义alert,confirm和modal对话框

    由于浏览器提供的alert和confirm框体验不好,而且浏览器没有提供一个标准的以对话框的形式显示自定义HTML的弹框函数,所以很多项目都会自定义对话框组件.本篇文章介绍自己在项目中基于bootst ...

  10. 【转】 CSS3实现10种Loading效果

    昨晚用CSS3实现了几种常见的Loading效果,虽然很简单,但还是分享一下,顺便也当是做做笔记…… PS:如需转载,请注明出处! 第1种效果: 代码如下: <div class="l ...