jquery中的动画功能

最新推荐文章于 2025-05-06 16:33:34 发布

gdd1990shl

最新推荐文章于 2025-05-06 16:33:34 发布

阅读量444

点赞数

文章标签： jquery html javascript

本文链接：https://blog.youkuaiyun.com/gdd1990shl/article/details/115608725

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#div_1{
				background-color: pink;
				height:400px;
				width:650px;
				margin:auto;
			}
			#div_2{
				background-color: deepskyblue;
				height:400px;
				width:650px;
				margin:auto;
				display: none;/*隐藏*/
			}
			#div_3{
				height:300px;
			}
			#div_3 img{
				height:300px;
			}
		</style>
		<script src="https://cdn.staticfile.org/jquery/1.9.1/jquery.js" type="text/javascript" charset="utf-8"></script>
		<!--使用静态资源库的jquery文件-->
		<!--静态资源 CDN 公共库是指一些服务商将我们常用的 JavaScript 库存放到网上，
			方便开发者直接调用，并且还对其提供 CDN 加速，
			这样一来可以让用户加速访问这些资源，二来还可节约自己服务器的流量。-->
		<!--CDN是Content Delivery Network的简称，即“内容分发网络”的意思。
			一般我们所说的CDN加速，一般是指网站加速或者用户下载资源加速。-->
		<script type="text/javascript">
			$(function(){
				$("#ct1").bind({
					"click":function(){
						$("#div_1").hide(2000);/*2000毫秒，即3秒内隐藏指定元素*/
						$("#div_1").show(1000,function(){
						$("#div_1").append($("<p style='color:red;font-size:30px;'>完成动画</p>"));
						$("#div_1").append($("<p style='font-weight: bold;'>太爷爷是口语说法，等同于爸爸的爷爷，爷爷的爸爸。又称曾祖，曾祖父。</p>"))
						})},/*1秒内显示,注意单双引号和括号，不能混淆和遗漏*/
					"mouseover":function(){
						$("#div_1").slideUp(3000);
						$("#div_3").slideDown(3000);
						$("div").toggle(1000);/*根据switch参数切换元素的可见状态（ture为可见，false为隐藏）。*/
						},
					"mouseout":function(){
						$("div").slideToggle(1000,function(){alert("Best wishes for U")});
					}
				})
				
				$(function(){
					$("#ct2").bind({
						"mouseover":function(){
							$("#div_1").show("fast");
							$("#div_2").fadeIn(2000);/*淡入*/
						},
						"mouseout":function(){
							$("#div_2").fadeOut(3000);/*淡出*/
						},
						"click":function(){
							$("#div_1 p:nth-child(3)").slideUp(2000);
							$("#div_1 p:nth-child(4)").slideUp(2000);
							$("#div_1 p:nth-child(5)").slideUp(2000);
							/*alert($("#div_1 p").length);
							console.log($("#div_1 p").length)*/
						}
					})
				})
			})
		</script>
	</head>
	<body>
		<input type="button" id="ct1" value="div动画" />
		<input type="button" id="ct2" value="p动画" />
		<div id="div_1">
			<p>祖：父亲的父亲称为“祖父”，口语称“爷爷”。父亲的母亲称为“祖母”，口语称“奶奶”。</p>
			<p>曾祖：祖父的父亲称为“曾祖父”。祖父的母亲称为“曾祖母”。</p>
			<p>高祖：祖父的祖父称为“高祖父”。祖父的祖母称为“高祖母”。</p>
			<p>天祖：高祖父的父亲称为“天祖父”。</p>
			<p>烈祖：天祖父的父亲称为“烈祖父”。</p>
			<p>太祖：烈祖父的父亲称为“太祖父”。</p>
			<p>远祖：太祖父的父亲称为“远祖父”。</p>
			<p>鼻祖：远祖父的父亲称为“鼻祖父”。</p>
		</div><hr />
		<div id="div_2">
			
		</div>
		<div id="div_3">
			<img src="img/python.png"/> 
		</div>
	</body>
</html>

在这里插入图片描述