Jquery 練習(二) 滑動涵數 slideDown, slideUp, slideToggle－熊比兔

Jquery擁有以下滑動涵數：

向下滑動（顯示）被選的元素　$(selector).slideDown(speed,callback)

向上滑動（隱藏）被選的元素　$(selector).slideUp(speed,callback)

對被所選之元素切換滑動　　　$(selector).slideToggle(speed,callback)

註：可針對p元素改變底色　　 $("p").css("background-color","#e5eeaa");


程式碼：
<html>
<head>
<script type="text/javascript" src="http://www.sonar.wsite.cz/jquery/jquery-1.7.1.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){
    $("#btn1").click(function(){
        $(".panel").slideDown("slow");
    });
    $("#btn2").click(function(){
        $(".panel").slideUp("slow");
    });
    $(".flip").click(function(){
        $(".panel").slideToggle("slow");
    });

　　　$("p").css("background-color","#e5eeaa");
});

</script>
<style type="text/css">

div.panel,p.flip{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c0c0c0;
}

div.panel{
height:120px;
display:none;
}

</style>
</head>

<body>

<div class="panel">
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>

<button id="btn1" type="button">向下滑動</button>
<button id="btn2" type="button">向上滑動</button>

<p class="flip">點我切換</p>

</body>
</html> 


觀看範例