欢迎您,零度科技专业海外服务器租用
公司电话: 24小时电话: 

当前位置:首页>网站建设教程>javascript教程>jquery教程

目录导航

jQuery Easing 动画效果扩展详细讲解

美国SK机房 发布于 2013-11-05  

jquery教程

今天介绍的是jQuery Easing  插件,非常的小。美化排版后是130行左右,要是压缩了那就更小了。这个插件弥补了jquery里面的动画效果的不足,是其动画效果更加强悍。如此强大而且小的插件,如果不好好加以利用,真是浪费。很多国内的朋友就是使用其中的一些效果,几个简单的参数。很少有人整理所有效果的参数。下面是我整理出来的:
linear,swing,jswing,easeInQuad,easeOutQuad,easeInOutQuad,easeInCubic,
easeOutCubic,easeInOutCubic,easeInQuart,easeOutQuart,easeInOutQuart,
easeInQuint,easeOutQuint,easeInOutQuint,easeInSine,easeOutSine,
easeInOutSine,easeInExpo,easeOutExpo,easeInOutExpo,easeInCirc,
easeOutCirc,easeInOutCirc,easeInElastic,easeOutElastic,easeInOutElastic,
easeInBack,easeOutBack,easeInOutBack,easeInBounce,easeOutBounce,easeInOutBounce
一共这么多效果参数。字面意思已经很明白,不过想真正清楚动画的效果还得看演示。

jQuery Easing 动画效果扩展详细讲解-图片1
jQuery Easing 动画效果扩展详细讲解-图片1

The box below will animate using that function and then a graph will appear showing that animation (black dots) against the ideal curve (white line). The X-axis is time, the Y-axis can be thought of as distance or progression. Each black dot (with a white border) signifies when jQuery actually changed a CSS property. (Note: old curves fade into the background; for comparison)

这段话是原作者的介绍,X轴表示时间,Y轴表示的是动画效果的变化。查看这些曲线变化,更利于掌握这个插件的效果。
插件支持站:http://gsgd.co.uk/sandbox/jquery/easing/
效果演示站点:http://james.padolsey.com/demos/jquery/easing/
对于想深入研究和只需要效果的朋友,这演示站点绝对是最好的。所有的效果一览还有上图示范的动画参数曲线。   如果你曾经使用过这个插件,下面的话就没有必要看了。直接去查看曲线及效果,运用到自己的站点吧。

下面介绍这个插件的简单使用方法,
查看jqueryAPI文档可以看到自定义动画函数.animate()有四个参数:
params (Options) : 一组包含作为动画属性和终值的样式属性和及其值的集合 duration (String,Number) : (可选) 三种预定速度之一的字符串(”slow”, “normal”, or “fast”)或表示动画时长的毫秒数值(如:1000) easing (String) : (可选) 要使用的擦除效果的名称(需要插件支持).默认jQuery提供”linear” 和 “swing”. callback (Function) : (可选) 在动画完成时执行的函数
其中参数easing默认有两个效果:“linear”和“swing”,需要更多的效果就要用上这个插件jQuery Easing 

转载自零度科技:http://www.ldisp.com/a/jquery/2013/2304.shtml

上一篇:jquery 获取 tagname
下一篇:jQuery.getScript() 方法,$.getScript()使用方法

 
了解零度?

零度科技主营全球服务器租用,如果您有服务器租用需求请联系

海外服务器租用

推荐香港、美国、韩国。提供站群服务器、高防服务器租用

海外特价服务器

关注零度特价服务器频道,了解全球特价服务器。

0

业务咨询

    技术服务

      特价活动
        全站搜索
        热门搜索:
        会员
        0通知
        客服
        0特价
        搜索
        TOP
        香港高防服务器,远程桌面,韩国服务器,nginx,反向代理