jquery.easing动画插件

今天我给大家分享的是一款jQuery动画效果插件jquery.easing.js,使用该插件可以实现直线匀速运功、变加速运动、缓冲等丰富的动画效果。它非常小巧,且有多种动画方式供选择,使用简单且免费。

首先引入jQuery库文件和Easing js文件

  <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>  
  <script type="text/javascript" src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>

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

  $(element).show({      
      duration: 1000,       
      easing: method,       
      complete: callback  
  });
  • 参数duration:定义动画时间(毫秒),时间越短,运动速度越快。
  • 参数easing:定义动画效果,Easing js提供多种动画效果,有匀速运动、变加速运动、缓冲波动效果,多种方法。
  • 参数complete:动画结束后回调函数callback。

jQuery Easing也可结合动画函数animate(),代码如下:

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

详情动画效果参考官网:http://gsgd.co.uk/sandbox/jquery/easing/

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容