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);
	});
});

分享名称：jQuery特效（二）
文章路径：https://www.cdcxhl.com/article24/gedeje.html

成都网站建设公司_创新互联，为您提供外贸建站、网页设计公司、网站营销、网站设计、网站维护、品牌网站制作

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容