JQuery初体验（Demo）

最新推荐文章于 2022-04-28 09:57:00 发布

iteye_1465

最新推荐文章于 2022-04-28 09:57:00 发布

阅读量189

点赞数

分类专栏：技术文章标签： Rails Web maven Ruby

本文链接：https://blog.youkuaiyun.com/iteye_1465/article/details/82067703

版权

技术专栏收录该内容

46 篇文章

订阅专栏

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>

这段代码是渐出的效果：