-
Notifications
You must be signed in to change notification settings - Fork 30
/
jquery-animation.md
178 lines (134 loc) · 4.59 KB
/
jquery-animation.md
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
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
## 显示和隐藏效果
通过同时改变元素的宽度和高度来实现显示或者隐藏。
### 无动画效果
- 显示: show()
- 隐藏: hide()
```javascript
$("#panel h5.head").click(function(){
var $content = $(this).next("div.content");
if($content.is(":visible")){
$content.hide();
}else{
$content.show();
}
})
```
### 有动画效果
#### 显示: show(speed,callback)
- speed: 预定义三种速度"slow"、"normal"和"fast"，或自定义时间，单位为毫秒。
- callback: 动画执行完毕后的回调函数。
#### 隐藏: hide(speed,callback)
- speed: 预定义三种速度"slow"、"normal"和"fast"，或自定义时间，单位为毫秒。
- callback: 动画执行完毕后的回调函数。
```javascript
$("#panel h5.head").click(function(){
var $content = $(this).next("div.content");
if($content.is(":visible")){
$content.hide(600);
}else{
$content.show(600);
}
})
```
## 滑动式动画效果
通过改变高度来实现显示或者隐藏的效果。
### 向上滑动: slideUp(speed,callback)
- speed: 预定义三种速度"slow"、"normal"和"fast"，或自定义时间，单位为毫秒。
- callback: 动画执行完毕后的回调函数。
### 向下滑动: slideDown(speed,callback)
- speed: 预定义三种速度"slow"、"normal"和"fast"，或自定义时间，单位为毫秒。
- callback: 动画执行完毕后的回调函数。
```javascript
$("#panel h5.head").click(function(){
var $content = $(this).next("div.content");
if($content.is(":visible")){
$content.slideUp(600);
}else{
$content.slideDown(600);
}
})
```
## 淡入淡出动画效果
通过改变不透明度 opacity 来实现显示或者隐藏。
### 淡入效果: fadeIn(speed,callback)
- speed: 预定义三种速度"slow"、"normal"和"fast"，或自定义时间，单位为毫秒。
- callback: 动画执行完毕后的回调函数。
### 淡出效果: fadeOut(speed,callback)
- speed: 预定义三种速度"slow"、"normal"和"fast"，或自定义时间，单位为毫秒。
- callback: 动画执行完毕后的回调函数。
```javascript
$("#panel h5.head").click(function(){
var $content = $(this).next("div.content");
if($content.is(":visible")){
$content.fadeOut(600);
}else{
$content.fadeIn(600);
}
})
```
## 动画切换效果
### toggle(duration,complete): 显示或隐藏匹配元素。
- duration: 一个字符串或者数字决定动画将运行多久。
- complete: 在动画完成时执行的回调函数。
```javascript
$('#clickme').click(function() {
$('#book').toggle('slow', function() {
// Animation complete.
});
});
```
### slideToggle(duration,complete)：用滑动动画显示或隐藏一个匹配元素。
- duration：一个字符串或者数字决定动画将运行多久。
- complete：在动画完成时执行的回调函数。
```javascript
$('#clickme').click(function() {
$('#book').slideToggle('slow', function() {
// Animation complete.
});
});
```
## 自定义动画效果
animate(properties,duration,easing,complete)
- properties：一个CSS属性和值的对象,动画将根据这组对象移动。
- duration：一个字符串或者数字决定动画将运行多久。
- easing：一个字符串，表示过渡使用哪种缓动函数。
- complete：在动画完成时执行的回调函数。
```javascript
$("#panel").click(function(){
$(this).animate({left: "500px"}, 3000);
})
```
aniamte(properties,options)
- properties：一个CSS属性和值的对象,动画将根据这组对象移动。
- options：一组包含动画选项的值的集合。 支持的选项：
- duration：一个字符串或者数字决定动画将运行多久。
- easing：一个字符串，表示过渡使用哪种缓动函数。
- queue：一个布尔值，指示是否将动画放置在效果队列中。如果为false时，将立即开始动画。
- complete：在动画完成时执行的回调函数。
```javascript
$("#panel").click(function(){
$(this).animate({left: "500px"}, 3000);
})
```
> **注意：**animate方法不接受以下属性:
>
> - backgroundColor
> - borderBottomColor
> - borderLeftColor
> - borderRightColor
> - borderTopColor
> - Color
> - outlineColor
## 并发与排队效果
### 并发效果: 指的就是多个动画效果同时执行。
```javascript
$("#panel").click(function(){
$(this).animate({left: "500px",height:"200px"}, 3000);
})
```
### 排队效果: 指的就是多个动画按照先后顺序执行。
```javascript
$("#panel").click(function(){
$(this).animate({left: "500px"}, 3000).animate({height: "200px"}, 3000);
})
```