<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.c2{display:none;}
.c3,.c33{width:100px;height:30px;line-height:30px;text-align:center;border-radius:5px;border:1px solid red;cursor:pointer;}
.c33{display:none;}
.span2{-webkit-animation:act 1s linear infinite;animation:act 1s linear infinite;}
@-webkit-keyframes act{
0%{-webkit-transform:scale(0.9);}
20%{-webkit-transform:scale(0.6);}
50%{-webkit-transform:scale(0.7);}
70%{-webkit-transform:scale(0.9);}
80%{-webkit-transform:scale(0.6);}
90%{-webkit-transform:scale(0.9);}
100%{-webkit-transform:scale(1);}
}
@keyframes act{
0%{transform:scale(0.9);}
20%{transform:scale(0.6);}
50%{transform:scale(0.7);}
70%{transform:scale(0.9);}
80%{transform:scale(0.6);}
90%{transform:scale(0.9);}
100%{transform:scale(1);}
}
</style>
</head>
<body>
<div class="c1">我是好人</div>
<div class="c2">
<p>我是好人</p>
<p>我是好人</p>
<p>我是好人</p>
<p>我是好人</p>
<p>我是好人</p>
<p>我是好人</p>
<p>我是好人</p>
<p>我是好人</p>
<p>我是好人</p>
<p>我是好人</p>
</div>
<div class="c3"><span class="span1">显示</span><span class="span2">↓</span></div>
<div class="c33"><span class="span1">隐藏</span><span class="span2">↑</span></div>
</body>
<script src="js/jquery-1.11.3.min.js"></script>
<script>
$(".c3,.c33").bind("click",function(){
/*$(".c3").html()=="显示"?$(".c3").html("隐藏"):$(".c3").html("显示");*/
if($(".span1").html()=="显示"){
$(".c2").slideDown(2000,function(){
$(".span1").html("隐藏");
$(".c3").css("display","none")
$(".c33").css("display","block");
});
/* $(".span2").html("↑")*/
}else{
$(".c2").slideUp(2000,function(){
$(".span1").html("显示");
$(".c3").css("display","block")
$(".c33").css("display","none");
})
/*$(".span2").html("↓")*/
}
})
</script>
</html>
