首先看一下效果
接下来看一下代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
div {
width: 300px;
height: 200px;
background-color: mediumvioletred;
}
</style>
<script src="jquery-1.12.1.js"></script>
<script>
/*
*
* show和hide方法有参数
* 参数1:时间----1000毫秒---1秒
* 参数2:回调函数---动画执行完毕后才执行
*
* */
$(function () {
//点击第一个按钮显示div
$("#btn1").click(function () {
$("#dv").show(5000, function () {
alert("完了");
});
});
//点击第二个按钮隐藏div
$("#btn2").click(function () {
$("#dv").hide(5000, function () {
alert("好了");
});
});
});
</script>
</head>
<body>
<input type="button" value="显示" id="btn1"/>
<input type="button" value="隐藏" id="btn2"/>
<div id="dv"></div>
</body>
</html>
本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请
点击举报。
