jQuery Easing 动画效果扩展

转载 2015年11月20日 11:11:30

jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果,而今天我给大家分享的是一款jQuery动画效果扩展增强插件jquery.easing.js,使用该插件可以实现直线匀速运功、变加速运动、缓冲等丰富的动画效果。

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

引入Easing js文件

该插件基于jQuery,所以需要同时引入jQuery库文件和Easing js文件。

<script type="text/javascript" src="js/jquery.min.js"></script> 
<script type="text/javascript" src="js/jquery.easing.min.js"></script> 

使用jQuery Easing

jQuery Easing是在jQuery原有的动画效果上进行了扩展,所以使用时可以根据jQuery原有的动画函数进行扩展。

1.jQuery默认动画

支持toggle()、slideUp()、slideDown()、show()、hide()等jQuery内置的动画效果,使用代码如下:

$(element).slideUp({ 
    duration: 1000,  
    easing: method,  
    complete: callback 
}); 

参数duration:定义动画运动时间,毫秒,其实就是速度,时间越短,运动速度越快。

参数easing:指定动画效果,Easing js提供多种动画效果,有匀速运动、变加速运动、缓冲波动效果,它们是: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.各动画实际效果请参照演示demo

参数complete:动画结束后回调函数callback,可以自定义动画结束后的调用函数。

2.使用jQuery自定义动画函数animate()

jQuery Easing结合jQuery的自定义动画函数animate()可以制作各种你想要的动画效果,使用代码如下:

$(element).animate({ 
    height:500
    width:600 
    },{ 
    easing: 'easeInOutQuad'
    duration: 500
    complete: callback 
}); 

上面的代码定义了一个缓冲效果的动画,我们可以根据项目需要,结合jQuery Easing制作各种动画效果。

Jquery----easing内置的动画效果

$(".slide-con").animate({marginLeft:-(143 * num)}, 500, 'easeOutQuad')
  • damys
  • damys
  • 2014年05月29日 14:50
  • 1885

jQuery Easing 动画效果扩展

jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果,而今天我给大家分享的是一款jQuery动画效果扩展增强插件jquery.easing.js,使用该插件可以实现直线匀速运功、变加速...
  • itmyhome
  • itmyhome
  • 2014年01月08日 17:56
  • 2308

jQuery Easing动画效果扩展插件

jQuery Easing动画效果扩展插件:jQuery Easing Plugin。在jQuery文档中我们可以看到,自定义动画函数.animate()有四个参数: params (Optio...
  • Jreta
  • Jreta
  • 2014年08月01日 22:29
  • 208

jQuery Easing 的最简单使用方法

导入js包easing.js 然后写效果:
  • lishangua
  • lishangua
  • 2014年09月16日 17:44
  • 2233

jQuery Easing Plugin内容晃动,滑动,缓慢变化效果

具体demo查看:http://gsgd.co.uk/sandbox/jquery/easing/ 用法: Default Choose a default easing met...
  • wyqlxy
  • wyqlxy
  • 2012年06月19日 12:56
  • 1823

jquery.easing.js缓动函数插件的用法

jQuery 提供了一些诸如 show、hide、slideUp、fadeIn 等等动画方法,可以方便的切换元素的显隐。更有强大的自定义动画方法 animate ,可以实现很多动画效果。为了让动画有好...
  • Panlingfan
  • Panlingfan
  • 2014年06月30日 16:22
  • 1837

23个漂亮的jQuery文字动画效果教程示例

Apple-like Retina Effect With jQuery Check this tutorial to know how the author has turned a ...
  • maikforever
  • maikforever
  • 2013年07月11日 21:29
  • 1751

jQuery Easing.js 动画效果扩展

Query API提供了简单的动画效果如淡入淡出以及自定义动画效果,而今天我给大家分享的是一款jQuery动画效果扩展增强插件jquery.easing.js,使用该插件可以实现直线匀速运功、变加速运...
  • sinat_35576176
  • sinat_35576176
  • 2016年11月08日 20:43
  • 25

jQuery Easing

【from】http://www.js8.in/451.html 在jQuery文档中我们可以看到,自定义动画函数.animate()有四个参数:params (Options) : 一组包含作为动画...
  • bennman
  • bennman
  • 2010年04月12日 13:05
  • 965

easings缓动函数速查 贝塞尔曲线实例

缓动函数指定动画效果在执行时的速度,使其看起来更加真实。 现实物体照着一定节奏移动,并不是一开始就移动很快的。当我们打开抽屉时,首先会让它加速,然后慢下来。当某个东西往下掉时,首先是越掉越快,撞到地...
  • lishangua
  • lishangua
  • 2014年12月19日 13:47
  • 2146
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery Easing 动画效果扩展
举报原因:
原因补充:

(最多只允许输入30个字)