4月13日学习笔记——jQuery动画
基本動畫函數
1 $("#divPop").show(); 2 $("#divPop").hide(); 3 $("#divPop").toggle();toggle()表示切換匹配目標事件的狀態，可以無參數，也可以設置動畫速度參數，單位毫秒。也可以輸入字符串"slow", "normal", or "fast"。
?
-
滑動動畫函數
-
淡入淡出動畫函數
fadeTo函數只改變對象的透明度,即使透明度為 0 對象仍然占位。而fadeIn和fadeOut最后一定會改變對象的display屬性，fadeOut后對象將從頁面上消失(不占位)，但是fadeTo僅僅是讓其透明(占位)。
?
-
自定義動畫函數
1.params(可選)
類型:Options
說明:一組包含作為動畫屬性和終值的樣式屬性和及其值的集合.
講解:通過把元素的樣式屬性值,從當前值逐漸調整到 params 設置的值而產生動畫效果.
2.duration(可選)
類型:String,Number
說明:三種預定速度之一的字符串("slow","normal",or"fast")或表示動畫時長的毫秒數值(如：1000)
講解:動畫效果持續的時間, 時間越長則變得越慢. 如果省略則不會產生動畫.
3.easing(可選)
類型:String
說明:要使用的擦除效果的名稱(需要插件支持).默認 jQuery 提供"linear" 和 "swing".
講解:為了讓元素逐漸達到 params 設置的最終效果,我們需要有一個函數來實現漸變, 這類函數就叫做 easing 函數.但是需要這里傳遞的只是 easing 函數名稱, 使用前需要先將 easing 函數注冊到 jQuery 上.
4.options 參數
類型:Options
說明:一組包含動畫選項的值的集合。
講解:所支持的屬性如下:
- duration: 與上面的 duration 參數相同
- easing: 與上面的 easing 參數相同
- complete :類型為 Function, 在動畫完成時執行的函數
- step: Callback
- queue (Boolean): (默認值: true) 設定為 false 將使此動畫不進入動畫隊列 (jQuery 1.2 中新增)
實例一：讓一個圖層從屏幕最上方掉落到最下方, 并且消失。
1 <!doctype html> 2 <html lang="zh"> 3 <head> 4 <meta charset="utf-8"/> 5 <title>jQuery Animation - fadeTo </title> 6 <script src="jquery-1.11.2.min.js"></script> 7 <script> 8 $(document).ready(function() { 9 $("#divPop").animate( 10 { 11 "opacity": "hide", 12 "top": $(window).height() - $("#divPop").height() - $("#divPop").position().top 13 }, 14 600, 15 function() { $("#divPop").hide(); } 16 ); 17 }); 18 </script> 19 </head> 20 <body> 21 <div id="divPop" style="background-color: #f0f0f0; border: solid 1px #000000; width: 300px; height: 100px; position:absolute;"> 22 <div style="text-align: center;">pop div</div> 23 </div> 24 </body> 25 </html>實例二：這個示例讓一個 div 越來越大，最后消失。
1 <!doctype html> 2 <html lang="zh"> 3 <head> 4 <meta charset="utf-8"/> 5 <title>jQuery Animation - fadeTo </title> 6 <script src="jquery-1.11.2.min.js"></script> 7 <script> 8 $(document).ready(function() { 9 $("#divPop").animate( 10 { 11 "opacity": "hide", 12 "width": $(window).width()-100 , 13 "height": $(window).height()-100 14 }, 15 500 16 ); 17 }); 18 </script> 19 </head> 20 <body> 21 <div id="divPop" style="background-color: #f0f0f0; border: solid 1px #000000; width: 300px; height: 100px; position:absolute;"> 22 <div style="text-align: center;">pop div</div> 23 </div> 24 </body> 25 </html>animate函數關鍵在于在params參數中設置css參數最終狀態，系統自動按照參數遞增來顯示動畫。opacity設置最后是隱藏還是顯示。
三點注意的地方：
1.如果尺寸沒有單位，那么默認單位是px。
2.屬性值需要用雙引號包裹，如果屬性值是數字的話可以省略。
3.類似font-size或者background-color這樣的屬性需要變成駝峰式寫法。fontSize
?
-
全局控制屬性
名稱: jQuery.fx.off
返回值:?Boolean
說明:
關閉頁面上所有的動畫。
講解:
把這個屬性設置為 true 可以立即關閉所有動畫(所有效果會立即執行完畢)。
?
轉載于:https://www.cnblogs.com/little-jelly/p/5386137.html
《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀總結
以上是生活随笔為你收集整理的4月13日学习笔记——jQuery动画的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 数据切分——Mysql分区表的管理与维护
- 下一篇： 每周必写