從jQuery API 文檔中可以知道,jQuery自定義動(dòng)畫的函數(shù).animate( properties [, duration] [, easing] [, complete] )有四個(gè)參數(shù):
引入之后,easing參數(shù)可選的值就有以下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自定義動(dòng)畫函數(shù)animate來指定easing效果,如自定義一種類彈簧效果的動(dòng)畫:
$(myElement).animate({ top: 500, opacity: 1 }, 1000, 'easeOutBounce');
值得一提的是jQuery 1.4版本中對(duì)animate()方法,easing的方法進(jìn)行了擴(kuò)展,支持為每個(gè)屬性指定easing方法,詳細(xì)請(qǐng)參考這里,如:
//第一種寫法 $(myElement).animate({ left: [500, 'swing'], top: [200, 'easeOutBounce'] }); //第二種寫法 $(myElement).animate({ left: 500, top: 200 }, { specialEasing: { left: 'swing', top: 'easeOutBounce' } });
使用jQuery內(nèi)置動(dòng)畫函數(shù)如slideUp()、slideDown()等來指定easing效果,以下兩種方法都可以:
$(myElement).slideUp(1000, method, callback}); $(myElement).slideUp({ duration: 1000, easing: method, complete: callback });
聲明:本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí),若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系,我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com