jQuery 的動畫效果圖片----隱藏打開方法
阿新 • • 發佈：2017-12-21
屬性 過程 ctype hid script ron log set 並且
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.2.1.js"></script> </head> <body> <img src="22.jpg" style="display: none"> <div> <input id="show"type="button" value="出現美女"> <input id="hide" type="button" value="藏起美女"> <input id="toggle" type="button" value="點擊美女"> </div> <script> $("#show").click(function () { $("img").show(5000); }) $("#hide").click(function () { $("img").hide(2000); }) $("#toggle").click(function () { $("img").toggle(800); }) </script> </body> </html>
此代碼中我們首先做了個img標簽，放了一張美女圖，並先設置display:none
隨後設置了3個Input標簽，並分別綁定了3個方法
1，show（）此方法是將綁定的標簽裏的display：none改為dispaly:inline-block,隨後從左上角起往右下角拉升放大，並且透明度由透明0逐漸恢復到1 ，並可以設置參數，1000為一秒鐘完成展示整個過程
2，hide（）與上方法相反，display由inline-block改為none，並且收縮圖像，透明度由1逐漸變成0.也是可以設置時間參數
3.toggle（）是上面2個方法的集合在一個鍵上，意思就是判斷你的dispaly是什麽屬性，如果是none 就設置inline-block 如果非none就設置inline-block；
jQuery 的動畫效果圖片----隱藏打開方法