<!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 的动画效果图片----隐藏打开方法
原文地址：http://www.cnblogs.com/laoguiaabb/p/8076380.html