国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當前位置: 首頁 - 科技 - 知識百科 - 正文

jQueryanimateeasing使用方法

來源:懂視網 責編:小采 時間:2020-11-27 16:41:05
文檔

jQueryanimateeasing使用方法

jQueryanimateeasing使用方法:從jQuery API 文檔中可以知道,jQuery自定義動畫的函數.animate( properties [, duration] [, easing] [, complete] )有四個參數: properties:一組包含作為動畫屬性和終值的樣式屬性和及其值的集合 duration(可選):動畫執行時間,其值
推薦度:
導讀jQueryanimateeasing使用方法:從jQuery API 文檔中可以知道,jQuery自定義動畫的函數.animate( properties [, duration] [, easing] [, complete] )有四個參數: properties:一組包含作為動畫屬性和終值的樣式屬性和及其值的集合 duration(可選):動畫執行時間,其值

從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
     

    引入之后,easing參數可選的值就有以下32種:

    1. linear
    2. swing
    3. easeInQuad
    4. easeOutQuad
    5. easeInOutQuad
    6. easeInCubic
    7. easeOutCubic
    8. easeInOutCubic
    9. easeInQuart
    10. easeOutQuart
    11. easeInOutQuart
    12. easeInQuint
    13. easeOutQuint
    14. easeInOutQuint
    15. easeInExpo
    16. easeOutExpo
    17. easeInOutExpo
    18. easeInSine
    19. easeOutSine
    20. easeInOutSine
    21. easeInCirc
    22. easeOutCirc
    23. easeInOutCirc
    24. easeInElastic
    25. easeOutElastic
    26. easeInOutElastic
    27. easeInBack
    28. easeOutBack
    29. easeInOutBack
    30. easeInBounce
    31. easeOutBounce
    32. easeInOutBounce
    當 然一般一個項目中不可能會用到這么多效果,為了減少代碼冗余,必要時可以不用引入整個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 
    }); 

    聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

    文檔

    jQueryanimateeasing使用方法

    jQueryanimateeasing使用方法:從jQuery API 文檔中可以知道,jQuery自定義動畫的函數.animate( properties [, duration] [, easing] [, complete] )有四個參數: properties:一組包含作為動畫屬性和終值的樣式屬性和及其值的集合 duration(可選):動畫執行時間,其值
    推薦度:
    • 熱門焦點

    最新推薦

    猜你喜歡

    熱門推薦

    專題
    Top
    主站蜘蛛池模板: 伊人网中文字幕 | 国产一级特黄全黄毛片 | 福利二区视频 | 国产全部视频在线播放 | 欧美日韩亚洲高清不卡一区二区三区 | 亚洲精品不卡久久久久久 | 亚洲欧美日韩中文无线码 | 中文字幕日本一本二本三区 | 激情欧美一区二区三区中文字幕 | 图片区 日韩 欧美 亚洲 | 免费国产线观看免费观看 | 国产呦系列 欧美呦 日韩呦 | 免费国产va在线观看视频 | 午夜免费啪啪 | 日韩色视频| 香蕉久久一区二区不卡无毒影院 | 久久综合精品国产一区二区三区 | 国产l精品国产亚洲区在线观看 | 国产亚洲一区二区精品 | 制服丝袜一区二区三区 | 国产高清不卡码一区二区三区 | 在线播放精品一区二区啪视频 | 最新亚洲精品 | 日韩在线视频在线观看 | 国产成人综合欧美精品久久 | 国产在线视频专区 | 国产欧美在线观看一区二区 | 久久久国产这里有的是精品 | 在线视频亚洲 | 日韩欧美在线电影 | 欧美日韩国产三级 | 自拍偷自拍亚洲精品被多人伦好爽 | 中文字幕无线码一区 | 久久99精品一区二区三区 | 欧美极品尤物在线播放一级 | 在线观看视频一区 | 欧美成人精品高清在线播放 | 成人亚洲欧美日韩在线 | 亚洲一级二级 | 91伊人国产 | 夜夜操夜夜爱 |