Jquery_效果-隱藏顯示、淡入淡出、滑動面板、簡單的動畫佇列
阿新 • • 發佈：2020-08-13
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 #panel,#flip{ 8 padding: 5px; 9 text-align: center; 10 background-color: #ccc; 11border: solid 1px #ff22ff; 12 } 13 #panel{ 14 padding: 50px; 15 display: none; 16 } 17 </style> 18 <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><!--引入Jquery--> 19 </head>20 <body> 21 <h2>這是一個標題</h2> 22 <p class="test1">這是一個段落</p> 23 <p id="test">這是另一個段落</p> 24 <button>點選消失</button> 25 <hr> 26 <p id="p1">滑鼠指標進入此處，會看到彈窗</p> 27 <hr> 28 Name:<input type="text"name="fullname"><br> 29 Email:<input type="email" name="email"><br> 30 31 <hr><h1>隱藏、顯示</h1> 32 <p>如果點選隱藏，那麼所有的p標籤元素將會消失</p> 33 <button id="hide">隱藏</button> 34 <button id="show">顯示</button> 35 <button id="h_s_all">隱藏、顯示</button> 36 37 <hr><h1>淡入淡出</h1> 38 <p>演示fadeIn的淡入效果、fadeOut的淡出效果</p><br> 39 <button id="fadeIn1">點選淡入div元素</button> 40 <button id="fadeOut1">點選淡出div元素</button> 41 <p>fadeToggle() 方法可以在 fadeIn() 與 fadeOut() 方法之間進行切換</p> 42 <button id="fadeToggle1">點選淡入淡出div元素</button> 43 <p>fadeTo() 方法允許漸變為給定的不透明度（值介於 0 與 1 之間）</p> 44 <button id="fadeTo1">點選讓div元素變淡</button> 45 <div id="div1" style="width: 80px;height: 80px;display: none;background-color: red;"></div><br> 46 <div id="div2" style="width: 80px;height: 80px;display: none;background-color: green;"></div><br> 47 <div id="div3" style="width: 80px;height: 80px;display: none;background-color: blue;"></div><br> 48 49 <hr><h1>滑動</h1> 50 <button id="stop">停止滑動</button> 51 <div id="flip">點我下滑面板</div> 52 <div id="panel">Hellow World!</div> 53 54 <hr><h1>animate() 方法允許您建立自定義的動畫</h1> 55 <button id="animate1">開始動畫</button> 56 <button id="animate3">開始動畫佇列</button> 57 <div id="animate2" style="background-color: #ff22ff;height: 100px;width: 100px;position: absolute;">中國</div> 58 59 60 <script> 61 $(document).ready(function () { 62 $("button").click(function () { 63 // $("p").hide();//選取所有 <p> 元素 64 // $("#test").hide();//#id 選擇器 65 $(".test1").hide();//.class 選擇器 66 }); 67 // $("p").click(function () {//當點選事件在某個 <p> 元素上觸發時，隱藏當前的 <p> 元素 68 // $(this).hide(); 69 // }); 70 $("p").dblclick(function () {//當雙擊元素時，會發生 dblclick 事件 71 $(this).hide(); 72 }); 73 // $("#p1").mouseenter(function () {//當滑鼠指標穿過元素時，會發生 mouseenter 事件;當滑鼠指標離開元素時，會發生 mouseleave 事件 74 // alert("您的滑鼠移動到了ID='p1的元素上！'"); 75 // }); 76 // $("#p1").mousedown(function () {//當滑鼠指標移動到元素上方，並按下滑鼠按鍵時，會發生 mousedown 事件;當在元素上鬆開滑鼠按鈕時，會發生 mouseup 事件 77 // alert("滑鼠在該段落上按下！"); 78 // }); 79 // $("#p1").hover(//hover()方法用於模擬游標懸停事件 80 // function () { 81 // alert("你進入了P1！"); 82 // }, 83 // function () { 84 // alert("現在你離開了p1"); 85 // } 86 // ); 87 $("input").focus(function () {//當元素獲得焦點時，發生 focus 事件 88 $(this).css("background-color","#ccc"); 89 }); 90 $("input").blur(function () {//當元素失去焦點時，發生 blur 事件 91 $(this).css("background-color","#fff"); 92 }); 93 94 // $("#hide").click(function () {//使用 hide() 和 show() 方法來隱藏和顯示 HTML 元素 95 // $("p").hide(1000,"linear",function () {//可選的 speed 引數規定隱藏/顯示的速度;第二個引數是一個字串，表示過渡使用哪種緩動函式 96 // alert("Hide()方法已完成!"); 97 // }); 98 // }); 99 // $("#show").click(function () { 100 // $("p").show(); 101 // }); 102 $("#h_s_all").click(function () {//使用 toggle() 方法來切換 hide() 和 show() 方法 103 $("p").toggle("slow",function () {//Callback 函式在當前動畫 100% 完成之後執行 104 alert("段落的隱藏和顯示");//在隱藏效果完全實現後回撥函式 105 }); 106 }); 107 108 $("#fadeIn1").click(function () {//fadeIn() 用於淡入已隱藏的元素 109 $("#div1").fadeIn(); 110 $("#div2").fadeIn("slow"); 111 $("#div3").fadeIn(1000); 112 }); 113 $("#fadeOut1").click(function () {// fadeOut() 方法用於淡出可見元素 114 $("#div1").fadeOut(); 115 $("#div2").fadeOut("slow"); 116 $("#div3").fadeOut(1000); 117 }); 118 $("#fadeToggle1").click(function () {// fadeToggle() 方法可以在 fadeIn() 與 fadeOut() 方法之間進行切換 119 $("#div1").fadeToggle(); 120 $("#div2").fadeToggle("slow"); 121 $("#div3").fadeToggle(1000); 122 }); 123 $("#fadeTo1").click(function () {// fadeToggle() 方法可以在 fadeIn() 與 fadeOut() 方法之間進行切換 124 $("#div1").fadeTo("slow",0.15);//$(selector).fadeTo(speed,opacity,callback); 125 $("#div2").fadeTo("slow",0.4);//必需的 opacity 引數將淡入淡出效果設定為給定的不透明度（值介於 0 與 1 之間） 126 $("#div3").fadeTo("slow",0.7);//fadeTo() 沒有預設引數，必須加上 slow/fast/Time 127 }); 128 129 // $("#flip").click(function () {// slideDown() 方法用於向下滑動元素；slideUp() 方法用於向上滑動元素 130 // $("#panel").slideDown("slow"); 131 // }); 132 $("#flip").click(function () {// slideToggle() 方法可以在 slideDown() 與 slideUp() 方法之間進行切換 133 $("#panel").slideToggle("5000"); 134 }); 135 $("#stop").click(function () { 136 $("#panel").stop();//動畫佇列停止動畫測試，只停止當前正在進行的動畫，停止當前動畫後，佇列中的下一個動畫開始進行 137 });//在 stop() 中設定 stopAll 的引數為 true，這樣就可以停止所有動畫效果而不是隻停止當前動畫:stop(true) 138 139 $("#animate1").click(function () { 140 $("#animate2").animate({//animate() - 操作多個屬性 141 left:'250px', 142 opactiy:'0.5', 143 // height:'150px', 144 // width:'150px' 145 // height:'+=150px',//定義相對值（該值相對於元素的當前值）。需要在值的前面加上 += 或 -= 146 // width:'+=150px' 147 height:'toggle'//把屬性的動畫值設定為 "show"、"hide" 或 "toggle" 148 }); 149 }); 150 $("#animate3").click(function () { 151 var div=$("#animate2");//在彼此之後編寫多個 animate() 呼叫 152 div.animate({height:'300px',opacity:'0.4'},"slow"); 153 div.animate({height:'300px',opacity:'0.8'},"slow"); 154 div.animate({height:'100px',opacity:'0.4'},"slow"); 155 div.animate({height:'100px',opacity:'0.8'},"slow"); 156 div.animate({left:'100px'},"slow");//往右邊移動了 100 畫素 157 div.animate({fontSize:'3em'},"slow");//增加文字的字號 158 }); 159 }); 160 </script> 161 162 </body> 163 </html>