<!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>