<span id="mktg5"></span>

<i id="mktg5"><meter id="mktg5"></meter></i>

        <label id="mktg5"><meter id="mktg5"></meter></label>
        最新文章專題視頻專題問答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] )有四個參數:

      1. properties:一組包含作為動畫屬性和終值的樣式屬性和及其值的集合
      2. duration(可選):動畫執行時間,其值可以是三種預定速度之一的字符串("slow", "normal", or "fast")或表示動畫時長的毫秒數值(如:1000)
      3. easing(可選):要使用的過渡效果的名稱,如:"linear" 或"swing"
      4. complete(可選):在動畫完成時執行的函數
      5. 其中參數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
        主站蜘蛛池模板: 18禁美女黄网站色大片免费观看 | 亚洲AV无码乱码国产麻豆| 亚洲av无码成人影院一区| 免费电视剧在线观看| 国产精品jizz在线观看免费 | 亚洲日韩一页精品发布| 国产精品美女免费视频观看| 亚洲人成人网站在线观看| 一级做a爰性色毛片免费| 久久国产免费福利永久| 国产亚洲午夜高清国产拍精品| 美女被免费视频网站| 大学生一级毛片免费看| 亚洲日韩国产欧美一区二区三区| 一个人免费高清在线观看| 亚洲日韩精品A∨片无码加勒比| 国产成人在线观看免费网站 | 99亚洲精品卡2卡三卡4卡2卡| 免费a级毛片在线观看| 亚洲国产视频一区| 成人免费视频软件网站| 国产亚洲男人的天堂在线观看 | 四色在线精品免费观看| 亚洲视频在线不卡| 在线观看免费视频一区| 亚洲AV无码乱码在线观看牲色 | 美女18一级毛片免费看| 亚洲综合色婷婷七月丁香| 欧洲亚洲综合一区二区三区| 亚洲综合色成在线播放| 色费女人18女人毛片免费视频| 亚洲精品乱码久久久久久蜜桃| 日韩精品无码免费专区午夜不卡| 亚洲国产精品成人| 特级无码毛片免费视频尤物| 亚洲人成网站在线播放2019| 国产亚洲精品成人AA片新蒲金 | 最新中文字幕电影免费观看| 一级毛片免费观看不收费| 一区二区三区亚洲| 最近免费视频中文字幕大全|