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:目标点，{'+=50',height:'+=50',left:'+=100',top:'+=100'}

//duration 间隔时间

//easing 运动速率 'swing'

//callback 回调函数

$('.demo').animate({'+=50',height:'+=50',left:'+=100',top:'+=100'}, 1000, 'swing', function(){console.log('over')});

//进行多组动画

$('.demo').animate({'+=50',height:'+=50',left:'+=100',top:'+=100'}, 1000, 'swing', function(){console.log('over')}).animate({'+=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({'+=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>

效果展示：