6.jQuery动画和队列，简单的queue()入队和dequeue()出队实现
# jQuery动画
- 1.hide() 隐藏
- 2.show() 展示
```js
$('.demo').show(3000, 'swing');//width height opacity padding 对这些参数同时进行操作
```
- 3.toggle() 隐藏，展示操作
- 4.fadeIn() 淡入，透明度从0-1
- 5.fadeOut() 淡出，透明度从1-0
- 6.fadetoggle() 淡入，淡出操作
- 7.fadeTo() 渐进到
```js
$('demo').fadeTo(1500, 0.5);//1500ms内从0-0.5
```
- 8.slideDown() 卷出高度从height-0
- 9.slideUp() 卷入，高度从0-height
- 10.animate() 动画
```js
//可以传入四个参数 target duration easing callback
//target:目标点，{width:'+=50',height:'+=50',left:'+=100',top:'+=100'}
//duration 间隔时间
//easing 运动速率 'swing'
//callback 回调函数
$('.demo').animate({width:'+=50',height:'+=50',left:'+=100',top:'+=100'}, 1000, 'swing', function(){console.log('over')});
//进行多组动画
$('.demo').animate({width:'+=50',height:'+=50',left:'+=100',top:'+=100'}, 1000, 'swing', function(){console.log('over')}).animate({width:'+=50',height:'+=50',left:'+=100',top:'+=100'}, 1000, 'swing', function(){console.log('over')});
```
- 11.stop() 和animate()配合使用，阻止当前运动，进入下一次运动
```js
$('.demo').stop(true);//停止所有运动，处于静止状态
$('.demo').stop(true, true);//停止当前运动，并且瞬间移动到目标点
```
- 12.finish() 和animate()配合使用，直接到达目标点
- 13.delay() 和animate()配合使用，
```js
$('.demo').delay(2000).animate({width:'+=50',height:'+=50'});//延迟2s后在执行动画
```
- 14.jQuery.fx.off 运动动画的开关
```js
jQuery.fx.off = true;//关闭运动动画
```
- jQuery动画插件
```js
<script src='./jquery.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js'></script>
```
## animate中的queue(队列)
- 1.queue
```js
$('.demo').queue('chain', function(){
console.log('over1');
}).queue('chain', function(){
console.log('over2');
}).queue('chain', function(){
console.log('over3');
});//为队列chain，放入三个function
$('.demo').queue('chain');//取出名为chain的队列
```
- 2.dequeue
```js
$('.demo').dequeue('chain').dequeue('chain').dequeue('chain');//取出队列中的一个函数并执行，先进先出原则
```
```js
$('.demo').queue('chain', function(next){
console.log('over1');
next();
}).queue('chain', function(next){
console.log('over2');
next();
}).queue('chain', function(next){
console.log('over3');
});//function中有个形参next，next存放的是队列中下一个function，这样出队，可以一次性执行所有队列中的函数
$('.demo').dequeue('chain');
```
- 3.clearQueue 清空队列
## animate的queue队列原理实现
```js
```
以上是markdown形式的笔记
简单实现jQuery中queue()和dequeue()方法：
(function () { //创建一个jQuery构造函数 function jQuery(selector) { return new jQuery.prototype.init(selector); } //为jQuery的原型添加init属性，所有实例可以使用该属性 jQuery.prototype.init = function (selector) { this.length = 0; //为this添加length属性，并且赋值为0 //选出 dom 并且包装成jQuery对象返回 //判断selector是null 和 undefined 和 dom对象 和 id 和 class的情况 if (selector == null) { //判断selector是null或undefined return this; } else if (typeof selector === 'string' && selector.indexOf('.') != -1) { //selector是class的情况 var dom = document.getElementsByClassName(selector.slice(1)); } else if (typeof selector === 'string' && selector.indexOf("#") != -1) { //selector是id的情况 var dom = document.getElementById(selector.slice(1)); } if (selector instanceof Element || dom.length == undefined) { //(selector是dom对象) || (selector是id，返回的是一个对象，对象没有length属性) this[0] = dom || selector; //(selector是id) || (selector是dom对象) this.length++; } else { //selector是class，返回的是一个类数组 for (var i = 0; i < dom.length; i++) { this[i] = dom[i]; this.length++; } } }; //为jQuery的原型添加css属性，所有实例可以使用该属性 jQuery.prototype.css = function (config) { for (var i = 0; i < this.length; i++) { for (var prop in config) { this[i].style[prop] = config[prop]; } } return this; //链式调用的精髓 }; //为jQuery对象的prevObject属性赋值，从而可以使用end()方法 jQuery.prototype.pushStack = function (dom) { //dom是jQuery对象 if (dom.constructor != jQuery) { //dom是原生的dom对象 dom = jQuery(dom); //将原生dom对象包裹成jQuery对象 } dom.prevObject = this; //将 return dom; }; //为jQuery的原型添加get属性，所有实例可以使用该属性 jQuery.prototype.get = function (num) { //num == null 返回数组 //num >= 0 返回this[num] //num < 0 返回this[length + num] return (num != null) ? ((num >= 0) ? (this[num]) : (this[num + this.length])) : ([].slice(this, 0)); }; //为jQuery的原型添加get属性，所有实例可以使用该属性 jQuery.prototype.eq = function (num) { return this.pushStack(this.get(num)); //调用jQuery.prototype.get()函数获取到dom对象，再封装为jQuery对象并且为jQuery对象添加prevObject属性 }; //为jQuery的原型添加add属性，所有实例可以使用该属性 jQuery.prototype.add = function (selector) { var curObj = jQuery(selector); //当前通过add添加的selector选中的jQuery对象 var prevObj = this; //调用add()的jQuery对象 var newObj = jQuery(); for (var i = 0; i < curObj.length; i++) { newObj[newObj.length++] = curObj[i]; } for (var i = 0; i < prevObj.length; i++) { newObj[newObj.length++] = prevObj[i]; } this.pushStack(newObj); //为jQuery对象添加prevObject属性 return newObj; //将合并后的jQuery对象返回 }; //为jQuery的原型添加end属性，所有实例可以使用该属性 jQuery.prototype.end = function () { return this.prevObject; //直接返回前一个jQuery对象 }; //为jQuery的原型添加on属性，所有实例可以使用该属性 jQuery.prototype.on = function (type, handle) { for (var i = 0; i < this.length; i++) { if (!this[i].cacheEvent) {//判断每一个原生dom对象中是否有事件 this[i].cacheEvent = {}; //为每一个原生的dom对象添加绑定事件 } if (!this[i].cacheEvent[type]) {//判断每一个原生对象是否有type类型的绑定事件 this[i].cacheEvent[type] = [handle];//没有则为该类型事件添加处理函数数组 } else { this[i].cacheEvent[type].push(handle);//若已经有该类型事件，则直接放入数组 } } }; //为jQuery的原型添加trigger属性，所有实例可以使用该属性 jQuery.prototype.trigger = function (type) { var self = this;//将调用trigger函数的jQuery对象存放在self中 var params = arguments.length > 1 ? [].slice.call(arguments, 1) : [];//判断调用trigger()函数时是否传入除了type以外的其他参数 for (var i = 0; i < this.length; i++) {//循环遍历this if (this[i].cacheEvent[type]) {//判断每个原生dom对象中是否存放有type类型的事件 this[i].cacheEvent[type].forEach(function (ele, index) {//有多个相同类型的事件时，要全部依次执行 ele.apply(self, params);//通过self调用事件，并且把参数传入 }); } } }; //为jQuery的原型添加queue属性，所有实例可以使用该属性 jQuery.prototype.queue = function (type, handle) { var queueObj = this;//jQuery对象 var queueName = arguments[0] || 'fx';//第一个形参，为队列名称 var addFunc = arguments[1] || null;//第二个形参，是处理函数 var len = arguments.length;//获取形参个数 //若只传了一个参数type，则直接返回队列数组 if(len == 1){ return queueObj[0][queueName]; } //取出jQuery中的dom对象，为dom对象添加队列事件 queueObj[0][queueName] == undefined ? (queueObj[0][queueName] = [addFunc]) : (queueObj[0][queueName].push(addFunc)); return this; }; //为jQuery的原型添加dequeue属性，所有实例可以使用该属性 jQuery.prototype.dequeue = function (type) { var self = this; var queueName = arguments[0] || 'fx'; var queueArr = this.queue(queueName); var currFunc = queueArr.shift(); if(currFunc == undefined){ return ; } var next = function(){ self.dequeue(queueName); } currFunc(next); return this; }; //上面的jQuery构造函数是new 一个jQuery.prototype.init对象， //jQuery.prototype.init对象上没有jQuery.prototype上的css()方法 //所以添加下面一句，让jQuery.prototype.init对象可以调用jQuery.prototype上的css()方法 jQuery.prototype.init.prototype = jQuery.prototype; //让外部可以通过$()或者jQuery()调用 window.$ = window.jQuery = jQuery; }());
调用queue()和dequeue()方法：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .demo { width: 100px; height: 100px; background: yellow; } </style> </head> <body> <div class="demo"></div> <script src="./myJquery.js"></script> <script> $('.demo').queue('chain', function (next) { console.log('over1'); next(); }).queue('chain', function (next) { console.log('over2'); next(); }).queue('chain', function (next) { console.log('over3'); }); $('.demo').dequeue('chain'); </script> </body> </html>
效果展示：
