show()方法和hide()方法

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

1.show()方法和hide()方法是jquery中最基本的動畫方法.為一個元素呼叫hide()方法,會將該元素樣式改為none

$("element").hide()與$("element").css("display","none")相同

2.當把元素隱藏後,可以使用show()方法將元素diplay樣式設定為先前的顯示狀態 

<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().hide();
	},function(){
	     $(this).next().show();
	})
})
</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>

3.show()方法和hide()方法讓元素動起來

show()方法和hide()方法在不帶任何引數的情況下,相當於css("display","none/block/inline")作用是立即隱藏或顯示匹配的元素,不會有任何動畫.可以為show()方法指定一個速度引數,例如show在600毫秒顯示出來,normal,400;fast,200

4.hide(600)會同時減少"內容"的高度,寬度和不透明度,直至這3個屬性的值都為0,最後設定css為"display:none".同理,show(600)方法則會從上到下增大"內容"的高度,從左到右增大內容寬度,同時增加內容不透明度

<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().hide(1600);
	},function(){
	     $(this).next().show(2600);
	})
})
</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>


相關文章