<!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；