jQuery animation and queue, simple queue() in and dequeue() out implementation

Keywords: Javascript JQuery Attribute REST

#jQuery animation

-1. Hide

-2.show() display
```js
$('. demo').show(3000, 'swing');//width height opacity padding operates on these parameters simultaneously
```
-3.toggle() is hidden to show the operation

-4.fadeIn() fade in, transparency from 0-1

-5.fadeOut(), transparency from 1-0

-6.fadetoggle() fade in, fade out operation

-7.fadeTo() gradually to
```js
$('demo').fadeTo(1500, 0.5); / / from 0-0.5 in 1500ms
```

-8.slideDown() roll out height from height-0

-9.slideUp() involved, height from 0-height

-10.animate() animation
```js
//Four parameters can be passed in: target duration eating callback
//Target: target point, {width:'+=50',height:'+=50',left:'+=100',top:'+=100'}
//duration interval
//easing movement rate 'swing'
//Callback callback function
$('.demo').animate({width:'+=50',height:'+=50',left:'+=100',top:'+=100'}, 1000, 'swing', function(){console.log('over')});

//Make multiple animations
$('.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() and animate() are used together to stop the current movement and enter the next movement
```js
$('. demo').stop(true); / / stops all motion and is at rest
$('. demo').stop(true, true); / / stops the current motion and moves to the target point in an instant
```

-12.finish() and animate() are used together to directly reach the target point

-13.delay() and animate() are used together,
```js
$('. demo').delay(2000).animate({width:'+=50',height:'+=50'}); / / execute the animation after a delay of 2s
```

-14.jQuery.fx.off switch of motion animation
```js
jQuery.fx.off = true; / / turn off motion animation
```

-jQuery animation plug-in
```js
<script src='./jquery.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js'></script>
```
##Queue in animate
- 1.queue
```js
$('.demo').queue('chain', function(){
    console.log('over1');
}).queue('chain', function(){
    console.log('over2');
}).queue('chain', function(){
    console.log('over3');
}); / / for queue chain, put three function s

$('. demo').queue('chain '); / / get the queue named chain
```
- 2.dequeue
```js
$('. demo').dequeue('chain').dequeue('chain').dequeue('chain '); / / take out a function in the queue and execute it. First in first out policy
```
```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');
}); / / there is a parameter next in the function. Next stores the next function in the queue. In this way, you can execute all the functions in the queue at once
$('.demo').dequeue('chain');
```

-3.clearQueue clear the queue

##Implementation of queue queue principle of animate
```js

```

These are markdown notes


Simply implement the queue() and dequeue() methods in jQuery:
(function () {
    //Create a jQuery Constructor
    function jQuery(selector) {
        return new jQuery.prototype.init(selector);
    }
    //by jQuery Prototype addition of init Property that can be used by all instances
    jQuery.prototype.init = function (selector) {
        this.length = 0; //by this add to length Property with a value of 0
        //elect dom And packed into jQuery Object return
        //judge selector yes null and undefined and dom Objects and id and class Situation of
        if (selector == null) { //judge selector yes null or undefined
            return this;
        } else if (typeof selector === 'string' && selector.indexOf('.') != -1) { //selector yes class Situation of
            var dom = document.getElementsByClassName(selector.slice(1));
        } else if (typeof selector === 'string' && selector.indexOf("#") != -1) { //selector yes id Situation of
            var dom = document.getElementById(selector.slice(1));
        }

        if (selector instanceof Element || dom.length == undefined) { //(selector yes dom object) || (selector yes id,An object is returned. The object does not length attribute)
            this[0] = dom || selector; //(selector yes id) || (selector yes dom object)
            this.length++;
        } else { //selector yes class,Returns an array of classes
            for (var i = 0; i < dom.length; i++) {
                this[i] = dom[i];
                this.length++;
            }
        }
    };

    //by jQuery Prototype addition of css Property that can be used by all instances
    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; //The essence of chain call
    };

    //by jQuery Object's prevObject Property assignment so that you can use the end()method
    jQuery.prototype.pushStack = function (dom) {
        //dom yes jQuery object
        if (dom.constructor != jQuery) { //dom It's native dom object
            dom = jQuery(dom); //Will be native dom Object wrapped into jQuery object
        }
        dom.prevObject = this; //take

        return dom;
    };

    //by jQuery Prototype addition of get Property that can be used by all instances
    jQuery.prototype.get = function (num) {
        //num == null Return array
        //num >= 0 return this[num]
        //num < 0 return this[length + num]
        return (num != null) ? ((num >= 0) ? (this[num]) : (this[num + this.length])) : ([].slice(this, 0));
    };

    //by jQuery Prototype addition of get Property that can be used by all instances
    jQuery.prototype.eq = function (num) {
        return this.pushStack(this.get(num)); //call jQuery.prototype.get()Function get to dom Object, repackaged as jQuery Object and is jQuery Object adding prevObject attribute
    };

    //by jQuery Prototype addition of add Property that can be used by all instances
    jQuery.prototype.add = function (selector) {
        var curObj = jQuery(selector); //Currently passed add Added selector Selected jQuery object
        var prevObj = this; //call add()Of jQuery object
        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); //by jQuery Object adding prevObject attribute

        return newObj; //The jQuery Object return
    };

    //by jQuery Prototype addition of end Property that can be used by all instances
    jQuery.prototype.end = function () {
        return this.prevObject; //Go directly back to the previous jQuery object
    };

    //by jQuery Prototype addition of on Property that can be used by all instances
    jQuery.prototype.on = function (type, handle) {
        for (var i = 0; i < this.length; i++) {
            if (!this[i].cacheEvent) {//Judge every original dom Whether there are events in the object
                this[i].cacheEvent = {}; //For every native dom Object add binding event
            }
            if (!this[i].cacheEvent[type]) {//Determine whether each native object has type Binding event of type
                this[i].cacheEvent[type] = [handle];//If not, add the handler array for the event of this type
            } else {
                this[i].cacheEvent[type].push(handle);//If there is already an event of this type, it will be directly put into the array
            }
        }
    };

    //by jQuery Prototype addition of trigger Property that can be used by all instances
    jQuery.prototype.trigger = function (type) {
        var self = this;//Will call trigger Functional jQuery Objects stored in self in
        var params = arguments.length > 1 ? [].slice.call(arguments, 1) : [];//Judgment call trigger()Function passed in except type Other parameters
        for (var i = 0; i < this.length; i++) {//Loop traversal this
            if (this[i].cacheEvent[type]) {//Judge each primitive dom Whether there is any in the object type Event of type
                this[i].cacheEvent[type].forEach(function (ele, index) {//When there are multiple events of the same type, all events should be executed in sequence
                    ele.apply(self, params);//adopt self Call the event and pass the parameter
                });
            }
        }
    };

    //by jQuery Prototype addition of queue Property that can be used by all instances
    jQuery.prototype.queue = function (type, handle) {
        var queueObj = this;//jQuery object
        var queueName = arguments[0] || 'fx';//First parameter, queue name
        var addFunc = arguments[1] || null;//The second parameter is the processing function
        var len = arguments.length;//Get the number of parameters

        //If only one parameter is passed type,Then directly return to the queue array
        if(len == 1){
            return queueObj[0][queueName];
        }

        //take out jQuery In dom Object, for dom Object add queue event
        queueObj[0][queueName] == undefined ? (queueObj[0][queueName] = [addFunc]) : (queueObj[0][queueName].push(addFunc));
        
        return this;
    };

    //by jQuery Prototype addition of dequeue Property that can be used by all instances
    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;
    };

    //above jQuery Constructor is new One jQuery.prototype.init Object,
    //jQuery.prototype.init No on object jQuery.prototype On css()method
    //So add the following sentence to let jQuery.prototype.init Object can call jQuery.prototype On css()method
    jQuery.prototype.init.prototype = jQuery.prototype;

    //Let the outside pass through $()perhaps jQuery()call
    window.$ = window.jQuery = jQuery;
}());
myJquery.js

Call the queue() and dequeue() methods:

<!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>
index.html

Effect display:

 

 

Posted by deansp2001 on Thu, 14 May 2020 07:18:57 -0700