jQuery之动画效果淡入淡出_第2关:jquery动画效果——淡入淡出

作者：小小林熬夜学编程 | 2024-06-02 01:46:54

踩

第2关:jquery动画效果——淡入淡出

通过淡入淡出的方法来实现效果

fadeIn
通过不透明度的变化来实现所有匹配元素的淡入效果，动画完成后可选地触发一个回调函数
fadeOut()
通过不透明度的变化来实现所有匹配元素的淡出效果，动画完成后可选地触发一个回调函数
fadeTo()
将所有匹配元素的不透明度以渐进方式调整到指定的不透明度，动画完成后可选地触发一个回调函数
fadeToggle()
通过不透明度的变化来开关所有匹配元素的淡入和淡出效果，动画完成后可选地触发一个回调函数
jQuery的淡入淡出案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.demo{
				width: 300px;
				height: 300px;
				background-color: greenyellow;
				display: none;
				margin-top: 10px;
			}
		</style>
	</head>
	<body>
		<input type="button" class="fadeIn" value="淡入" />
		<input type="button" class="fadeOut" value="淡出" />
		<input type="button" class="fadeTo" value="渐进式淡入" />
		<input type="button" class="fadeToggle" value="切换" />
		<div class="demo"></div>
		<script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				//fadeIn
				$('.fadeIn').click(function() {
					$('.demo').fadeIn(1000, 'swing')
				})
				//fadeOut
				$('.fadeOut').click(function() {
					$('.demo').fadeOut(1000, 'swing')
				})
				//fadeTo
				$('.fadeTo').click(function() {
					$('.demo').fadeTo(1000, 0.3,'swing')
				})
				//fadeToggle
				$('.fadeToggle').click(function() {
					$('.demo').fadeToggle(1000,'swing')
				})
			})
		</script>
	</body>
</html>

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

本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】