jQuery特效（二）

发布时间：2020-06-07 15:20:57 阅读：375 作者：yeleven 栏目：web开发

前端开发者测试专用服务器限时活动，0元免费领，库存有限，领完即止！点击查看>>

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

亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>

向AI问一下细节

jQuery特效（二）

猜你喜欢

最新资讯

相关推荐

开发者交流群：

相关标签