<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
        主站蜘蛛池模板: 国产亚洲精久久久久久无码AV| 亚色九九九全国免费视频| 日本一道一区二区免费看| 亚洲一本到无码av中文字幕| 久久综合AV免费观看| 亚洲最大中文字幕无码网站| 成人超污免费网站在线看| 精品亚洲456在线播放| 青青青国产免费一夜七次郎| 蜜桃传媒一区二区亚洲AV| 又黄又爽无遮挡免费视频| eeuss草民免费| 亚洲精品无码Av人在线观看国产| 黄页免费在线观看| 亚洲国产精品久久久久婷婷软件 | 嫩草视频在线免费观看| 美国毛片亚洲社区在线观看| 亚洲第一成人影院| 最近更新免费中文字幕大全| 久久狠狠高潮亚洲精品| 成年女人视频网站免费m | 亚洲第一成年网站视频| 波多野结衣中文一区二区免费| 国产大片免费天天看| 亚洲av网址在线观看| 中字幕视频在线永久在线观看免费| 亚洲中文字幕久在线| 亚洲VA综合VA国产产VA中| 97在线视频免费公开视频| 亚洲av成人综合网| 2022中文字字幕久亚洲| 精品无码国产污污污免费网站 | 好爽好紧好大的免费视频国产| 人妻免费久久久久久久了| 综合自拍亚洲综合图不卡区| 精品久久久久久久免费加勒比| 99久久成人国产精品免费| 久久综合久久综合亚洲| 亚洲综合av永久无码精品一区二区 | 日韩精品无码免费专区午夜不卡| 亚洲免费中文字幕|