javascript 简单复习

2026-04-05 11:57:37 +08:00 · 2022-04-18 20:40:34 +08:00
parent c030d40264
commit bb9110d289
54 changed files with 4123 additions and 0 deletions
--- a/JavaScript/jquery2/jquery-animation.md
+++ b/JavaScript/jquery2/jquery-animation.md
@@ -0,0 +1,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);
+})
+```