jQuery效果—隐藏与显示
程序员文章站
2022-07-13 13:01:31
...
HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习</title>
<script src="jquery-3.3.1.js"></script>
<script src="HideAndShow.js"></script>
</head>
<body>
<p><a href="http://bilibili.com">萌萌哒德鲁伊</a></p>
<p><button id="hide">隐藏</button><button id="show">显示</button></p>
<p><button id="both">隐藏/显示</button></p>
<p>法师</p>
<p>猎人</p>
<p>萨满</p>
<p>术士</p>
<p>战士</p>
<p>圣骑士</p>
</body>
</html>JS代码：
$(document).ready(function () {
$("#hide").click(function () {
$("a").hide(2000);
// hide为隐藏效果，括号里面是动画执行的时长
}) ;
$("#show").click(function () {
$("a").show(1000);
//show为显示效果，括号里面是动画的执行时间
});
$("#both").click(function () {
$("a").toggle(2000);
// toggle(转换)，可以实现隐藏显示两种动画，后面为动画执行的时间
});
$("p").click(function () {
$(this).hide(500,function () {
$(this).remove();
//被隐藏后，元素还没有消失，使其消失不占用空间
});
});
//$()指定的对象，如果是一类同类型的对象，可以通过this调用自身，同时hide（）方法
//不光能设置动画效果，还能调用调用方法
});效果：
上一篇： POI生成excel
下一篇： poi生成Excel