jq中的动画

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>jq中的动画</title>
		<style type="text/css">
			div{
				width: 200px;
				height: 200px;
				margin-right: 20px;
				margin-bottom: 30px;
				float: left;
			}
			#a{
				background-color: palegreen;
			}
			#b{
				background-color: palevioletred;
			}
			#c{
				background-color: gold;
			}
			
			
		</style>
	</head>
	<body>
		<div id="a"></div>
		<div id="b"></div>
		<div id="c"></div>
		
		<hr style="clear: both;" />
		
		<button id="hide">隐藏</button>
		<button id="show">显示</button>
		<button id="teshu1">特殊效果1</button>
		
		<button id="fadeIn">淡入</button>
		<button id="fadeOut">淡出</button>
		<button id="teshu2">特殊效果2</button>
		<button id="teshu3">特殊效果3</button>
		
		<button id="slideUp">上拉</button>
		<button id="slideDowm">下拉</button>
		<button id="teshu4">特殊效果4</button>
	</body>
</html>
<script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
	//1.第一组 隐藏/显示
	$("#hide").click(function(){
		$("#a").hide(800);
		/*
		动画时间,可以写数字  毫秒
		也可以 slow, normal, fast
		*/
		$("#b").hide("slow");
		$("#c").hide(1000, function(){
			console.log("动画结束才会执行此函数!!!");
		})
	})
	
	$("#show").click(function(){
		$("#a").show(300);
		$("#b").show("normal");
		$("#c").show(2000, function(){
			console.log("动画执行完毕!展示show");
		})
	})
	
	//特殊1 就是偷狗 toggle  即可显示有可隐藏
	$("#teshu1").click(function(){
		$("#a").toggle(1000);
		$("#b").toggle("fast");
		$("#c").toggle(1000, function(){
			console.log("特殊效果1!!动画完毕!");
		})
		
	})
	//--------------------------------------------------------
	//2.淡出淡出动画效果   关键单词:fade
	$("#fadeOut").click(function(){
		$("#a").fadeOut(500);
		$("#b").fadeOut("slow");
		$("#c").fadeOut(1000, function(){
			console.log("淡出效果动画结束!");
		})
	})
	
	$("#fadeIn").on("click", function(){
		$("#a").fadeIn(600);
		$("#b").fadeIn("fast");
		$("#c").fadeIn(2000, function(){
			console.log("淡入效果动画结束!!");
		})
	})
	
	//变化到指定的透明度
	$("#teshu2").click(function(){
//		fadeTo(动画时间, 透明度值, 函数)
		$("#a").fadeTo(1200, 0.3);
		$("#b").fadeTo("slow", 0.5);
		$("#c").fadeTo( 1000, 0.2, function(){
			console.log("透明度变化结束!!");
		})
	})
	
	//既可淡出也可淡出  fadeToggle()
	$("#teshu3").click(function(){
		$("#a").fadeToggle(1000);
		$("#b").fadeToggle("slow");
		$("#c").fadeToggle("fast", function(){
			console.log("特殊效果3执行结束!");
		})
	})
	//---------------------------------------------------
	//3.上拉下拉动画
	$("#slideUp").click(function(){
		$("#a").slideUp(1000);
		$("#b").slideUp("slow");
		$("#c").slideUp(800, function(){
			console.log("上拉动画结束!");
		})
	})
	
		$("#slideDowm").click(function(){
		$("#a").slideDown(1000);
		$("#b").slideDown("slow");
		$("#c").slideDown(800, function(){
			console.log("下拉动画结束!");
		})
	})
		
		$("#teshu4").click(function(){
		$("#a").slideToggle(1000);
		$("#b").slideToggle("slow");
		$("#c").slideToggle(800, function(){
			console.log("上拉/下拉动画结束!");
		})
	})
</script>

JQ
#JQ
jq中的动画
http://ultracode.cn/2021/01/03/JQ/jq中的动画/
作者
Win
发布于
2021年1月3日
许可协议