slideUp()方法和slideDown()方法

榴蓮餅發表於2017-03-27
IDE

slideUp()方法和slideDown()方法只會改變元素的高度.當呼叫slideDown()方法時,這個元素將由上到下延伸顯示.sideUp()方法正好相反,由下到上縮短隱藏

<style type="text/css">
*{margin:0;padding:0;}	
body { font-size: 13px; line-height: 130%; padding: 60px }
#panel { width: 300px; border: 1px solid #0050D0 }
.head { height:24px;line-height:24px;text-indent:10px;background: #96E555; cursor: pointer;width:100%; }
.content { padding: 10px; text-indent:24px; border-top: 1px solid #0050D0;display:block; }
</style>
<script type="text/javascript">
$(function(){
    $("#panel h5.head").toggle(function(){
	     $(this).next().slideUp(1000);
	},function(){
	     $(this).next().slideDown(2000);
	})
})
</script>
</head>
<body>
<div id="panel">
	<h5 class="head">什麼是jQuery?</h5>
	<div class="content">
		jQuery是繼Prototype之後又一個優秀的JavaScript庫，它是一個由 John Resig 建立於2006年1月的開源專案。jQuery憑藉簡潔的語法和跨平臺的相容性，極大地簡化了JavaScript開發人員遍歷HTML文件、操作DOM、處理事件、執行動畫和開發Ajax。它獨特而又優雅的程式碼風格改變了JavaScript程式設計師的設計思路和編寫程式的方式。
	</div>
</div>
</body>


相關文章