jq slideUp slideDown 

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

 

posted @ 2016-08-08 16:36  dongxiaolei  阅读(338)  评论(0)    收藏  举报