1.效果
2.代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动画效果-隐藏-显示-动画</title>
<script src="./js/jquery.js"></script>
<style>
.op {
height: 100px;
100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="op"></div>
<input type="button" value="hide" class="hide">
<input type="button" value="show" class="show">
<input type="button" value="toggle" class="toggle">
</body>
</html>
<script>
$(function(){
$(".hide").click(function(){
//$(".op").hide(1000);//隐藏
$(".op").slideUp(1000);//先上划出隐藏
})
$(".show").click(function(){
//$(".op").show(1000);//展示
$(".op").slideDown(1000);//想下划出展示
});
$(".toggle").click(function(){
$(".op").slideToggle(1000);//双方都兼容
})
})
</script>