jQuery上滑\下滑
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery动画效果</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
// 滑动效果:
// jQuery的滑动是通过高度的变化（向某个方向增大或者缩小）来动态的显示所匹配的元素;
//slideDown(speed,callback)通过高度的变化，向下增大的动态效果 下滑效果;
$('p').hide()
// $('button').click(function(){
// $("p").slideDown(500)
// })
//slideUp(speed,callback)通过高度的变化，向上减小的动态效果 上滑效果;
$('button').hover(
function(){
$("p").slideDown(500)
},
function(){
$("p").slideUp()
}
)
})
</script>
<style type="text/css">
*{margin:0;padding:0;}
.box{margin:20px auto;font-size:20px;color: #fff;width: 300px;}
.box p{height: 160px;width: 300px;background: #9EEA6A;text-align: center;line-height: 160px;position: relative;}
.box button{height: 40px;width: 300px;border:none;color: #fff;background: #437421;}
</style>
</head>
<body>
<div class="box">
<button class="btu">点击</button>
<p class="one">~ 我是p标签 ~</p>
</div>
</body>
</html>
