jQuery特效-原创手记-慕课网

一、jQuery效果-滑动

<!DOCTYPE html><html>	<head>		<meta charset="UTF-8">		<title></title>		<script src="jquery-1.10.1.min.js"></script>		<script src="move.js"></script>		<style>			#content,#flipShow,#flipHide,#flipToggle{				padding: 5px;				text-align: center;				background-color: red;				border: solid 1px green;			}			#content{				display: none;				padding: 50px;			}		</style>	</head>	<body>		<div id="flipShow">出现</div>		<div id="flipHide">隐藏</div>		<div id="flipToggle">显示/隐藏</div>		<div id="content">Hello World</div>	</body></html>$(document).ready(function(){	$("#flipShow").click(function(){		$("#content").slideDown(1000);	});	$("#flipHide").click(function(){		$("#content").slideUp(1000);	});	$("#flipToggle").click(function(){		$("#content").slideToggle(500);	});});

二、jQuery效果-回调

<!DOCTYPE html><html>	<head>		<meta charset="UTF-8">		<title></title>		<script src="jquery-1.10.1.min.js"></script>		<script src="callback.js"></script>	</head>	<body>		<button>隐藏</button>		<p>Hello WorldHello WorldHello WorldHello WorldHello WorldHello World</p>	</body></html>$(document).ready(function(){	$("button").click(function(){//		$("p").hide(1000,function(){//			alert("动画结束，这个方法称为被回调");//		});		$("p").css("color","red").slideUp(1000).slideDown(1000);	});});