<!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；
时间： 2024-08-11 05:02:08