#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:
myJquery.js(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; }());
Call the queue() and dequeue() methods:
index.html<!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>