根據 jquery官網api文檔編寫 https://www.jq22.com/chm/jquery/index.html 一、基本效果 關於以下屬性中的 easing 想要更好的去瞭解這個屬性 https://www.runoob.com/jqueryui/api-easings.html 我想這 ...
根據 jquery官網api文檔編寫 https://www.jq22.com/chm/jquery/index.html
一、基本效果
關於以下屬性中的 easing 想要更好的去瞭解這個屬性 https://www.runoob.com/jqueryui/api-easings.html 我想這裡會更加清晰明瞭
1.show() 顯示隱藏的匹配元素。語法：show([speed,[easing],[fn]])
speed:三種預定速度之一的字元串("slow","normal", or "fast")或表示動畫時長的毫秒數值(如：1000)
fn:在動畫完成時執行的函數，每個元素執行一次 （回調函數）。
2.hide() 顯示隱藏的匹配元素。語法：hide([speed,[easing],[fn]])
speed:三種預定速度之一的字元串("slow","normal", or "fast")或表示動畫時長的毫秒數值(如：1000)
fn:在動畫完成時執行的函數，每個元素執行一次 （回調函數）。
3.toggle() 1.9版本 .toggle() 方法刪除，它很實用，如果元素是可見的，切換為隱藏的；如果元素是隱藏的，切換為可見的。
二、滑動效果(與show，hide相似，不同點是動畫效果不同以下幾點都是 )
1.slideDown() 通過高度變化（向下增大）來動態地顯示所有匹配的元素，在顯示完成後可選地觸發一個回調函數。
2.slideUp（） 通過高度變化（向上減小）來動態地隱藏所有匹配的元素，在隱藏完成後可選地觸發一個回調函數。
3.slideToggle() 通過高度變化來切換所有匹配元素的可見性，併在切換完成後可選地觸發一個回調函數。
三、淡入淡出效果（淡入淡出是改變元素的透明度實現隱藏顯現不會修改寬高，這是和上面的兩種效果的區別）
1.fadeIn() 通過不透明度的變化來實現所有匹配元素的淡入效果，併在動畫完成後可選地觸發一個回調函數。
2.fadeOut() 通過不透明度的變化來實現所有匹配元素的淡出效果，併在動畫完成後可選地觸發一個回調函數。
3.fadeTo() 把所有匹配元素的不透明度以漸進方式調整到指定的不透明度，併在動畫完成後可選地觸發一個回調函數
eg：$("img:eq(2)").fadeTo(3000,0.3); // fadeTo()方法 將圖片以3000毫秒的時間過渡到0,3的透明度
4.fadeToggle() 通過不透明度的變化來開關所有匹配元素的淡入和淡出效果，併在動畫完成後可選地觸發一個回調函數。
四、自定義效果（自定義效果相當於集以上效果於一身，可以改變元素的寬高，透明度等屬性.....）
1.animate() animate() 方法執行 CSS 屬性集的自定義動畫。該方法通過CSS樣式將元素從一個狀態改變為另一個狀態。
CSS屬性值是逐漸改變的，這樣就可以創建動畫效果。只有數字值可創建動畫（比如 "margin:30px"）。
字元串值無法創建動畫（比如 "background-color:red"）。
語法如下：
$("button:eq(10)").click(function(){ //animate()方法
$("img:eq(3)").animate({ //讓圖片經歷3秒寬度變成200px 高度變成200px 透明度變成0.5
width:"300px",
height:"200px",
opacity:"0.5",
},3000);
});
2.stop() 停止所有在指定元素上正在運行的動畫。如果隊列中有等待執行的動畫(並且clearQueue沒有設為true)，他們將被馬上執行
方法 屬性： stop([clearQueue],[jumpToEnd])
clearQueue:如果設置成true，則清空隊列。可以立即結束動畫。
jumpToEnd:如果設置成true，則完成隊列。可以立即完成動畫。
3.delay() 設置一個延時來推遲執行隊列中之後的項目。jQuery 1.4新增。用於將隊列中的函數延時執行。他既可以推遲動畫隊列的執行，也可以用於自定義隊列。
4.finish() 停止當前正在運行的動畫，刪除所有排隊的動畫，並完成匹配元素所有的動畫。 finish()和stop有著相似之處，不同點在於，stop是停止，stop(true,true)
是結束當前的動畫，finish不同他將會清除該元素上所有的動畫，直接到動畫完成的最終效果。
六、設置效果
效果的使用關鍵是如何搭配使用，在什麼時候使用，可以嵌套，可以迴圈等等。簡單的案列執行起來很簡單。emmmmmmm最後兩張截圖原諒我不知道怎麼寫案列QAQ
我這裡根據以上的效果方法寫了簡單案例如下：
<html> <head> <meta charset="utf-8" /> <title>動畫效果</title> <script src="./js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script> </head> <style type="text/css"> *{ padding: 0; margin: 0; } img{width: 100px; height: 100px;opacity: ;} </style> <body> <h3>基本效果</h3> <img src="./img/1.jpg" > <button type="button">hide</button> <button type="button">show</button> <button type="button">Toggle</button> <br> <h3>滑動效果</h3> <img src="./img/2.jpg" > <button type="button">slideDown</button> <button type="button">slideUp</button> <button type="button">slideToggle</button> <br> <h3>淡入淡出效果</h3> <img src="./img/3.jpg" > <button type="button">fadeIn</button> <button type="button">fadeOut</button> <button type="button">fadeTo</button> <button type="button">fadeToggle</button> <br> <h3>自定義效果</h3> <img src="./img/4.jpg" > <button type="button">animate</button> <button type="button">stop</button> <button type="button">delay</button> <button type="button">finish</button> <script type="text/javascript"> $(function(){ //基本效果 $("button:eq(0)").click(function(){ $("img:eq(0)").hide("slow") // hide()方法 }); $("button:eq(1)").click(function(){ $("img:eq(0)").show("slow") // show()方法 }); $("button:eq(2)").click(function(){ $("img:eq(0)").toggle("slow") // show()方法 }); //滑動效果 $("button:eq(3)").click(function(){ $("img:eq(1)").slideDown("slow"); //slideDown()方法 }); $("button:eq(4)").click(function(){ $("img:eq(1)").slideUp("slow"); //slideUp()方法 }); $("button:eq(5)").click(function(){ $("img:eq(1)").slideToggle("slow"); //slideToggle()方法 }); // 淡入淡出效果 $("button:eq(6)").click(function(){ $("img:eq(2)").fadeIn(3000); // fadeIn()方法 }); $("button:eq(7)").click(function(){ $("img:eq(2)").fadeOut(3000); // fadeOut()方法 }); $("button:eq(8)").click(function(){ $("img:eq(2)").fadeTo(3000,0.3); // fadeTo()方法 }); $("button:eq(9)").click(function(){ $("img:eq(2)").fadeToggle(3000); // fadeToggle()方法 }); //自定義效果 $("button:eq(10)").click(function(){ //animate()方法 $("img:eq(3)").animate({ //讓圖片經歷3秒 透明度變成0.1 opacity:"0.1", },3000,function(){ $("img:eq(3)").animate({ //讓圖片經歷3秒透明度變成1 opacity:"1", },3000); }); }); $("button:eq(11)").click(function(){ $("img:eq(3)").stop(true,true); //stop()方法，停止改元素上的動畫 stop參數可為true,true如stop(true,true) }); $("button:eq(12)").click(function(){ $("img:eq(3)").slideUp(3000).delay(2000).fadeIn(3000) //delay()方法 在執行完slideUp()方法後等待2秒在執行fadeIn()方法 }); $("button:eq(13)").click(function(){ $("img:eq(3)").finish() //finish()方法清除該元素的所有排隊的動畫 }); }); </script> </body> </html>
效果：
個人學習，內容拙劣，
