您现在的位置:首页 > 新闻中心
jQuery Easing 动画效果扩展
发布时间:2014-04-10      发布人:深圳网站建设

jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果,而今天我给大家分享的是一款jQuery动画效果扩展增强插件jquery.easing.js,使用该插件可以实现直线匀速运功、变加速运动、缓冲等丰富的动画效果。
 
jQuery Easing是一款比较老的jQuery插件,在很多网站都有应用,尤其是在一些页面滚动、幻灯片切换等场景应用比较多。它非常小巧,且有多种动画方案供选择,使用简单,而且免费。

 

下载: Jquery Easing演示文档


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

使用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制作各种动画效果。


网站关键字:深圳网站建设 | 深圳网站改版 | 深圳网页设计 | 深圳包装设计公司 | 深圳广告设计公司 | 深圳平面设计公司 | HTML地图 | XML地图
友情链接:全球设计导航网 | 济南网站建设 | 鼎力淘宝小号 | 石家庄建站 | 宁波网站建设 | 企业模板建站
Copyright ©2014 seawe.net. All Rights Reserved. 深圳西威广告设计有限公司版权所有 粤ICP备14021186号   

QQ在线客服

  • 在线咨询
  • 客服001
  • 客服001

服务热线

  • 13410030062
  • 0755-28608079