欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

JQuery初体验(Demo)

程序员文章站 2022-05-01 11:02:54
...

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>

 这段代码是渐出的效果:


JQuery初体验(Demo)