從jQuery API 文檔中可以知道,jQuery自定義動畫的函數.animate( properties [, duration] [, easing] [, complete] )有四個參數:
引入之后,easing參數可選的值就有以下32種:
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 });
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com