JQuery初体验（Demo）

Demo:Show

 

	<meta content="text/html; charset=utf-8">
	<script src="js/jquery-1.4.4.js"></script>
	<script src="js/ui/jquery.effects.core.js"></script>
	<script src="js/ui/jquery.effects.clip.js"></script>
	<style>
	.toggler { width: 800px; height: 200px; }
	#effect { width: 800px; height: 100px; left:100px; padding: 0em; position: relative; }
	#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
	</style>
	
	<script>	
	$(function() {
		// run the currently selected effect
		function runEffect(id) {
			// get effect type from 
			var selectedEffect = id;
			// run the effect
			$( "#effect" ).show( selectedEffect, 1000 );
		};	
		$( "#effect" ).hide();
		runEffect('clip');
	});
	</script>
<div class="toggler">
	<div id="effect" class="ui-widget-content ui-corner-all">
		<h3 class="ui-widget-header ui-corner-all">Show</h3>
		<p>
			Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
		</p>
	</div>
</div>

 这段代码是渐出的效果：