亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

JQuery強化教程 —— jQuery Easing

標簽:
JQuery


 

从jQuery API 文档中可以知道,jQuery自定义动画的函数.animate( properties [, duration] [, easing] [, complete] )有四个参数:properties:一组包含作为动画属性和终值的样式属性和及其值的集合duration(可选):动画执行时间,其值可以是三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000)easing(可选):要使用的过渡效果的名称,如:"linear" 或"swing"complete(可选):在动画完成时执行的函数其中参数easing默认有两个效果:"linear"和"swing",如果需要更多效果就要插件支持了,jQuery Easing Plugin提供了像"easeOutExpo"、"easeOutBounce"等30多种效果,大家可以点击这里去看每一种easing的演示效果,下面详细介绍下其使用方法及每种easing的曲线图。 jQuery easing 使用方法首先,项目中如果需要使用特殊的动画效果,则需要在引入jQuery之后引入jquery.easing.1.3.js<script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://code.jquery.com/jquery- ... gt%3B  <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://gsgd.co.uk/sandbox/jque ... gt%3B   引入之后,easing参数可选的值就有以下32种:linearswingeaseInQuadeaseOutQuadeaseInOutQuadeaseInCubiceaseOutCubiceaseInOutCubiceaseInQuarteaseOutQuarteaseInOutQuarteaseInQuinteaseOutQuinteaseInOutQuinteaseInExpoeaseOutExpoeaseInOutExpoeaseInSineeaseOutSineeaseInOutSineeaseInCirceaseOutCirceaseInOutCirceaseInElasticeaseOutElasticeaseInOutElasticeaseInBackeaseOutBackeaseInOutBackeaseInBounceeaseOutBounceeaseInOutBounce当然一般一个项目中不可能会用到这么多效果,为了减少代码冗余,必要时可以不用引入整个jquery.easing.1.3.js,我们可以只把我们需要的几种easing放入Javascript文件中,如项目中只用到"easeOutExpo"和"easeOutBounce"两种效果,只需要下面的代码就可以了jQuery.extend( jQuery.easing,  {      easeOutExpo: function (x, t, b, c, d) {          return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;      },      easeOutBounce: function (x, t, b, c, d) {          if ((t/=d) < (1/2.75)) {              return c*(7.5625*t*t) + b;          } else if (t < (2/2.75)) {              return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;          } else if (t < (2.5/2.75)) {              return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;          } else {              return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;          }      },  });   使用jQuery自定义动画函数animate来指定easing效果,如自定义一种类弹簧效果的动画:$(myElement).animate({      top: 500,      opacity: 1  }, 1000, 'easeOutBounce');  值得一提的是jQuery 1.4版本中对animate()方法,easing的方法进行了扩展,支持为每个属性指定easing方法,详细请参考这里,如: $(myElement).animate({      left: [500, 'swing'],      top: [200, 'easeOutBounce']  });  也可以用另外一种写法:  $(myElement).animate({      left: 500,      top: 200  }, {      specialEasing: {          left: 'swing',          top: 'easeOutBounce'      }  });    使用jQuery内置动画函数如slideUp()、slideDown()等来指定easing效果,以下两种方法都可以: $(myElement).slideUp(1000, method, callback});  $(myElement).slideUp({      duration: 1000,       easing: method,       complete: callback  });


點擊查看更多內容
TA 點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優質文章

正在加載中
  • 推薦
  • 評論
  • 收藏
  • 共同學習,寫下你的評論
感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消