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>


觀看範例

gcchiou 發表在 痞客邦 PIXNET 留言(0) 人氣()