版权声明：本文为大都督作者的原创文章，未经 大都督 允许也可以转载，但请注明出处，谢谢！ 共勉！ https://blog.csdn.net/qq_37335220/article/details/85679520
1.效果图
2.HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>51 jQuery-使用slideDown()与slideUp()方法实现滑动效果</title>
<style type="text/css">
body{font-size:13px}
.divFrame{width:86px;border:solid 1px #666}
.divFrame .divTitle{padding:5px;background-color:#eee;cursor: pointer;}
.divFrame .divContent{padding:8px;}
.divFrame .divContent img{border:solid 1px #ccc;padding:2px;width: 60px;height: 60px;}
</style>
</head>
<body>
<div class="divFrame">
<div class="divTitle">隐藏图片</div>
<div class="divContent">
<img src="../img/pig.jpg" alt=""/>
<div id="divTip"></div>
</div>
</div>
<script src="../jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//初始化一个布尔变量值
var blnShow = false;
//定义变量获取标题部分
var $Title = $(".divTitle");
//定义变量获取提示元素
var $Tip = $("#divTip");
//点击标题部分事件
$Title.click(function(){
if (!blnShow) {
//图片高度向上减小，执行完成后，回调一个函数
$("img").slideUp(3000, function(){
$Tip.html("关闭成功！")
})
//改变标题内容
$(this).html("显示图片");
//改变布尔变量值
blnShow = true;
}else {
//清空提示内容
$Tip.html("");
//图片高度向下增大
$("img").slideDown(3000);
$(this).html("隐藏图片");
blnShow = false;
}
})
})
</script>
</body>
</html>