广

JavaScript

  • IOS开发
  • android开发
  • PHP编程
  • JavaScript
  • ASP.NET
  • ASP编程
  • JSP编程
  • Java编程
  • 易语言
  • Ruby编程
  • Perl编程
  • AJAX
  • 正则表达式
  • C语言
  • 编程开发

    jQuery Easing 动画效果扩展

    2018-04-13 09:16:56 次阅读 稿源:互联网
    零七广告

    jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果,而今天我给大家分享的是一款jQuery动画效果扩展增强插件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原有的动画效果上进行了扩展,所以使用时可以根据jQuery原有的动画函数进行扩展。$(element).slideUp({ duration: 1000, easing: method, complete: callback});:定义动画运动时间,毫秒,其实就是速度,时间越短,运动速度越快。:指定动画效果,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.各动画实际效果请参照。

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

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

    零七网部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与零七网进行文章共享合作。

    零七广告