jq 操作动画

最新推荐文章于 2024-04-05 13:18:03 发布

神奇大叔

最新推荐文章于 2024-04-05 13:18:03 发布

阅读量204

点赞数

分类专栏： jQuery 文章标签： jQuery

本文链接：https://blog.csdn.net/weixin_43294560/article/details/103073054

版权

jQuery 专栏收录该内容

34 篇文章 1 订阅

订阅专栏

链式调用.stop(true),可停止之前动画，加载当前动画
动画可以链式调用

**显示隐藏的的元素(逐渐显示,动态改变成设置的高和宽)**
	通过hide()方法隐藏的或是在CSS里设置了display:none
		数组对象.show()
			$("#showdiv").show();
		设置时间
			$("#showdiv").show(3000);
		设置回调方法
		    $("#showdiv").show(3000,函数);     会等到显示结束时调用函数
		    								若已经显示,则会立即指向函数
		    									
**隐藏显示的元素(逐渐淡出，动态减小高和宽至消失,消失过程其他元素会动态移动自己位置)**
	可添加回调函数
	对象数组.hide()
	设置时间
	对象数组.hide(3000);
		$("#showdiv").hide(3000);


**将隐藏可见元素隐藏，将不可见元素显示(相当于show()和hide()结合)**
可添加回调函数
	数组对象.toggle(时间)
			function t2()
		{
			$("#showdiv,#div01").toggle(3000);
			$("#showdiv,#div01").toggle(3000);
		}


**下滑高度变化(会将不可见显示为可见)**
	可添加回调函数
	$("#showdiv").slideDown(3000);  会逐渐从上到下变化到设置的高度，只改变高度，不改变宽度



**上滑高度变化(会将不可见显示为可见)**
	可添加回调函数
	$("$showdiv").slideUp(2000);   高度会下到上减小，不会改变宽度

**改变上滑下滑方向**
	添加定位，设置bottom不设置top，则slideDown()变成从下到上加载，slideUp()变成从上到下消失


**淡出淡入**
	可添加回调函数
	$("$showdiv").fadeOut(时间);  会逐渐淡出到不见
	$("$showdiv").fadeIn(时间);   会逐渐淡入显示


**可通过.的方式组合操作**
	$("#end").hide().delay(8000).slideDown(2000);

代码示例：

<html>
	<head>
		<meta charset="utf-8">
		<title>jq 动画</title>
		<script type="text/javascript" charset="uft-8" src="js/jquery-3.4.1.js"></script>
		<script type="text/javascript">
			
			function t1()
			{
				$("#end").delay(12000).slideDown(2000);
				$("#showdiv").show(3000);
				$("#div01").hide(3000);
				
				$("#showdiv,#div01").toggle(3000);
				
				$("#showdiv").slideDown(3000);
				$("#div01").slideUp(2000);
				$("#showdiv").fadeOut(3000);
		
				$("#div02,#div03").toggle(3000);
				$("#div02,#div03").toggle(3000);
				$("#div02").slideDown(3000);
				$("#div03").slideUp(2000);
				$("#div02").fadeOut(3000);
				
				
		
				
			}
			
			function t2()
			{
				$("#showdiv,#div01").toggle(3000);
				$("#showdiv,#div01").toggle(3000);
			}
			function t3()
			{
				$("#end").hide(5000);
				$("#end").slideDown(6000);
			}
			
		</script>
		
		<style type="text/css">
			#showdiv{
				height:300px;
				background-color:orange;
				background-size:30% 100%;
				background-repeat: no-repeat;
				background-image: url(../css学习/img/钢铁侠4.jpg);
				display:none;
			}

			#div01{
				height:300px;
				background-color:red;
				background-size:30% 100%;
				background-repeat: no-repeat;
				background-image: url(../css学习/img/钢铁侠5.jpg);
				
			}
			#end{
				height:1030px;
				width: 1920px;
				background-image: url(../css学习/img/钢铁侠.jpg);
				background-repeat: no-repeat;
				background-size:1550px 720px;
				display: none;
			}
						#div02{
				height:300px;
				background-color:blueviolet;
				background-size:30% 100%;
				background-repeat: no-repeat;
				background-image: url(../css学习/img/蜘蛛侠.jpg);
				display:none;
				
			}
						#div03{
				height:300px;
				background-color:lightskyblue;
				background-size:30% 100%;
				background-repeat: no-repeat;
				background-image: url(../css学习/img/黑豹.jpg);
				
			}

		</style>
	</head>
	<body onload="t1()" >
		<div id="showdiv">
			
			
		</div>
		
		<div id="div01">
			
		</div>

		<div id="div02">
			
		</div>
		<div id="div03">
			
		</div>
		<div id="end">
			
		</div>
	</body>
</html>

神奇大叔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jq 操作动画

**显示隐藏的的元素(逐渐显示,动态改变成设置的高和宽)** 通过hide()方法隐藏的或是在CSS里设置了display:none 数组对象.show() $("#showdiv").show(); 设置时间 $("#showdiv").show(3000);**隐藏显示的元素(逐渐淡出，动态减小高和宽至消失,消失过程其他元素会动态移动自己位置)** 对象数组.hi...
复制链接

扫一扫

专栏目录