1. 程式人生 > >jQuery效果--隱藏/顯示

jQuery效果--隱藏/顯示

<script>

 $(
                function(){
                    $("#d1").click(
                            function(){
                                if($("#d2").css("display")=="none"){
                                    $("#d2").show("fast");  //  fast 快
                                }else{
                                    $("#d2").hide("slow");  //slow  慢
                                }
                            }
                    )
                }
        )

</script>

<body>

   <div id="d1" style="width: 200px; height: 50px;border: 1px solid black; background-color: cadetblue ">
        點選顯示/隱藏div
    </div>
   <div id="d2" style="width: 200px; height: 300px;border: 1px solid black;background-color: cadetblue; display: none">
      隱藏顯示內容   隱藏顯示內容   隱藏顯示內容   隱藏顯示內容   隱藏顯示內容

     隱藏顯示內容   隱藏顯示內容   隱藏顯示內容   隱藏顯示內容

     隱藏顯示內容   隱藏顯示內容   隱藏顯示內容   隱藏顯示內容
    </div>

</body>