jQuery特效(二)

发布时间:2020-06-07 15:20:57 作者:yeleven
来源:网络 阅读:373

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













推荐阅读:
  1. SMTP (二)
  2. python如何学习(二)

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

特效 jquery ue

上一篇:Java 读取PDF中的文本和图片

下一篇:ASA icmp检测和内网NAT转化

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》