jQuery提供一些特效方法来增强web页面人体验。
支持基本特效、淡入淡出特效、滑动特效、自定义特效。
基本特效
| 方法 | 说明 |
| show() | 显示选中的元素 |
| hide() | 隐藏选中的元素 |
| toggle() | 在选中元素上切换显示和隐藏的状态 |
示例：
|
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
|
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>基本特效</title>
</script>
</head>
<body>
<div id="one">点击我隐藏</div>
<div id="two">点击我显示上面的</div>
<div id="three">点击我控制第二个</div>
<script>
$(function () {
$("#one").on("click",function(){
$("#one").hide();
});
$("#two").on("click",function(){
$("#one").show();
});
$("#three").on("click",function(){
$("#two").toggle();
});
});
</script>
</body>
</html>
|
淡入淡出特效
| 方法 | 说明 |
| fadeIn() | 淡入选中元素使其变得不透明 |
| fadeOut() | 淡出选中元素使其变得透明 |
| fadeTo() | 修改选中元素的透明度 |
| fadeToggle() | 使用透明度来隐藏或显示选中的元素（切换其当前的状态） |
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>淡入淡出</title>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<div>
<ul id="ul">
<li id="a">鼠标</li>
<li id="b">键盘</li>
<li id="c">屏幕</li>
<li id="d"><a>主机</a></li>
</ul>
</div>
<script>
$(function () {
var $li=$("li");
//淡入
$li.hide().each(function (index) {
$(this).delay(650*index).fadeIn(700);
});
//淡出
$li.on('click',function () {
$(this).fadeOut(700);
});
})
</script>
</body>
</html>
自定义特效
| 方法 | 说明 |
| delay() | 延迟队列中操作的执行 |
| stop() | 停止一个正在运行的动画 |
| animate() | 创建自定义动画 |
