jQuery 效果
# jQuery 效果
jQuery 给我们封装了很多动画效果，最为常见的如下：
# 1. 显示隐藏效果
jQuery 提供了 show、hide 和 toggle 方法来实现元素的显示、隐藏和切换显示隐藏。
显示效果
显示元素，语法规范如下：
show([speed,[easing],[fn]])
1
speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。easing：(可选) 用来指定切换效果，默认是“swing”，可用参数“linear”。fn：(可选) 回调函数，在动画完成时执行的函数，每个元素执行一次。
隐藏效果
隐藏元素，语法规范如下：
hide([speed,[easing],[fn]])
1
speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。easing：(可选) 用来指定切换效果，默认是“swing”，可用参数“linear”。fn：(可选) 回调函数，在动画完成时执行的函数，每个元素执行一次。
切换显示隐藏效果
切换元素的显示隐藏，语法规范如下：
toggle([speed,[easing],[fn]])
1
speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。easing：(可选) 用来指定切换效果，默认是“swing”，可用参数“linear”。fn：(可选) 回调函数，在动画完成时执行的函数，每个元素执行一次。
# 2. 滑动效果
jQuery 提供了 slideDown、slideUp 和 slideToggle 方法来实现元素的滑动显示、隐藏和切换。
下滑效果
显示元素，语法规范如下：
slideDown([speed,[easing],[fn]])
1
speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。easing：(可选) 用来指定切换效果，默认是“swing”，可用参数“linear”。fn：(可选) 回调函数，在动画完成时执行的函数，每个元素执行一次。
上滑效果
隐藏元素，语法规范如下：
slideUp([speed,[easing],[fn]])
1
speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。easing：(可选) 用来指定切换效果，默认是“swing”，可用参数“linear”。fn：(可选) 回调函数，在动画完成时执行的函数，每个元素执行一次。
滑动切换效果
切换元素的显示隐藏，语法规范如下：
slideToggle([speed,[easing],[fn]])
1
speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。easing：(可选) 用来指定切换效果，默认是“swing”，可用参数“linear”。fn：(可选) 回调函数，在动画完成时执行的函数，每个元素执行一次。
# 3. 事件切换
使用 hover 方法来绑定鼠标移入和移出的事件处理函数。
hover([over,]out)
- `over`：鼠标移到元素上要触发的函数（相当于 `mouseenter`）。
- `out`：鼠标移出元素要触发的函数（相当于 `mouseleave`）。
- 如果只写一个函数，则鼠标经过和离开都会触发它。
1
2
3
4
5
2
3
4
5
# 4. 动画队列及其停止排队方法
动画或效果队列
动画或效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。
停止排队
使用 stop 方法停止动画或效果：
stop()
- `stop()` 方法用于停止动画或效果。
- 注意： `stop()` 写到动画或者效果的前面，相当于停止结束上一次的动画。
1
2
3
4
2
3
4
# 5. 淡入淡出效果
jQuery 提供了 fadeIn、fadeOut 和 fadeToggle 方法来实现元素的淡入、淡出和切换淡入淡出效果。
淡入效果
显示元素，语法规范如下：
fadeIn([speed,[easing],[fn]])
1
speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。easing：(可选) 用来指定切换效果，默认是“swing”，可用参数“linear”。fn：(可选) 回调函数，在动画完成时执行的函数，每个元素执行一次。
淡出效果
隐藏元素，语法规范如下：
fadeOut([speed,[easing],[fn]])
1
speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。easing：(可选) 用来指定切换效果，默认是“swing”，可用参数“linear”。fn：(可选) 回调函数，在动画完成时执行的函数，每个元素执行一次。
淡入淡出切换效果
切换元素的淡入淡出，语法规范如下：
fadeToggle([speed,[easing],[fn]])
1
speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。easing：(可选) 用来指定切换效果，默认是“swing”，可用参数“linear”。fn：(可选) 回调函数，在动画完成时执行的函数，每个元素执行一次。
# 6. 淡入淡出效果调整透明度
jQuery 提供了 fadeTo 方法来渐进方式调整元素的不透明度。
渐进方式调整到指定的不透明度
fadeTo([speed], opacity, [easing], [fn])
- `opacity`：透明度必须写，取值 0~1 之间。
- `speed`：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
- `easing`：(可选) 用来指定切换效果，默认是“swing”，可用参数“linear”。
- `fn`：(可选) 回调函数，在动画完成时执行的函数，每个元素执行一次。
1
2
3
4
5
6
2
3
4
5
6
# 7. 自定义动画 animate
jQuery 提供了 animate 方法来实现自定义动画效果。
animate(params, [speed], [easing], [fn])
- `params`：想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是复合属性则需要采用驼峰命名法（如 `borderLeft`）。
- `speed`：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
- `easing`：(可选) 用来指定切换效果，默认是“swing”，可用参数“linear”。
- `fn`：(可选) 回调函数，在动画完成时执行的函数，每个元素执行一次。
1
2
3
4
5
6
2
3
4
5
6
# 8. 综合示例
以下是展示各种 jQuery 效果的示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery 效果示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
margin: 10px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
// 显示效果
$('#show').click(function() {
$('.box').show('slow');
});
// 隐藏效果
$('#hide').click(function() {
$('.box').hide('fast');
});
// 切换显示隐藏效果
$('#toggle').click(function() {
$('.box').toggle(1000);
});
// 下滑效果
$('#slideDown').click(function() {
$('.box').slideDown('slow');
});
// 上滑效果
$('#slideUp').click(function() {
$('.box').slideUp('fast');
});
// 滑动切换效果
$('#slideToggle').click(function() {
$('.box').slideToggle(1000);
});
// 淡入效果
$('#fadeIn').click(function() {
$('.box').fadeIn('slow');
});
// 淡出效果
$('#fadeOut').click(function() {
$('.box').fadeOut('fast');
});
// 淡入淡出切换效果
$('#fadeToggle').click(function() {
$('.box').fadeToggle(1000);
});
// 渐进方式调整到指定的不透明度
$('#fadeTo').click(function() {
$('.box').fadeTo('slow', 0.5);
});
// 自定义动画
$('#animate').click(function() {
$('.box').animate({
width: '200px',
height: '200px',
opacity: 0.5
}, 1000);
});
// 事件切换
$('.box').hover(function() {
$(this).css('background-color', 'blue');
}, function() {
$(this).css('background-color', 'red');
});
// 停止动画
$('#stop').click(function() {
$('.box').stop(true, true);
});
});
</script>
</head>
<body>
<button id="show">显示</button>
<button id="hide">隐藏</button>
<button id="toggle">切换显示/隐藏</button>
<button id="slideDown">下滑</button>
<button id="slideUp">上滑</button>
<button id="slideToggle">切换滑动</button>
<button id="fadeIn">淡入</button>
<button id="fadeOut">淡出</button>
<button id="fadeToggle">切换淡入淡出</button>
<button id="fadeTo">调整透明度</button>
<button id="animate">自定义动画</button>
<button id="stop">停止动画</button>
<div class="box"></div>
</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
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
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
编辑此页 (opens new window)
上次更新: 2024/12/28, 18:32:08