<html>
<head>
<meta charset="utf-8">
<title>41- jQuery展开和收起动画</title>
<style type="text/css">
{ / 通用样式 /
margin: 0; / 外边距：0/
padding: 0; / 内边距：0/
}
div{ / div样式/
width: 100px; / 宽：100像素/
height: 300px; / 高：300像素/
background: red; / 背景：赤色/
margin-top: 10px; / 外上边距：10像素/
display: none; / 隐蔽元素并分开文档/
}
</style>
<script src="../static/js/jquery-3.6.0.js"></script> <!-- 引入jQuery -->
<script>
$(function(){ // 入口函数
$("button").eq(0).click(function(){ // 第一个展开按钮被按下后调用函数
$("div").slideDown(1000, function(){alert('展开完毕')}) // 找到div 用1000毫秒的韶光展开div，结束后调用函数弹出 展开完毕
});
$("button").eq(1).click(function(){ // 第二个收起按钮被按下后调用函数
$("div").slideUp(1000, function(){alert('收起完毕')}) // 找到div 用1000毫秒的韶光收起div，结束后调用函数弹出 收起完毕
});
$("button").eq(2).click(function(){ // 第三个切换按钮被按下后调用函数
$("div").slideToggle(1000, function(){alert('切换完毕')}) // 找到div 用1000毫秒的韶光展开/收起 之间切换状态div，结束后调用函数弹出 切换完毕
});
})
</script>
</head>
<body>
<button>展开</button> <!-- 展开按钮 -->
<button>收起</button> <!-- 收起按钮 -->
<button>切换</button> <!-- 切换按钮 -->
<div></div> <!-- div盒子 -->
</body>
</html>
