Home Web Front-end JS Tutorial Use queue to simulate jquery animation algorithm example_jquery

Use queue to simulate jquery animation algorithm example_jquery

May 16, 2016 pm 04:19 PM
jquery animation algorithm queue

The example in this article describes the animation algorithm of using queue to simulate jquery. Share it with everyone for your reference. The specific analysis is as follows:

Aaron has recently fallen madly in love with algorithm research, which is probably going to cost a lot of brain cells. I like to pick up ready-made ones to save some effort. I found a piece of source code he wrote and it was quite fun to run it, so I used it to analyze it, firstly to absorb the nutrients inside, and secondly to deepen my skills in source code learning. It is said that this source code is really a secret to improving the internal strength of js. If you don’t believe it, come and taste it with me.

Copy code The code is as follows:
//Execute the function immediately, there is nothing to say. Watch the demo below
/**
(function($){
//The $ here will be provided by the return value of the immediate execution function that follows
})(function(){
//The result of running this function is $
Return aQuery
}())

*/
(function($) {
​ window.$ = $;
})(function() {

//Used to match ID string
//(?: Indicates no grouping here), refer to the regular content
//But I personally think it would be better to change * to a sign, because there must be at least one character after #
var rquickExpr = /^(?:#([w-]*))$/;
//At first glance, he is a severe patient of jquery
Function aQuery(selector) {
           return new aQuery.fn.init(selector);
}

/**
* Animation
* @return {[type]} [description]
​​*/
var animation = function() {

var self = {};
        var Queue = []; //Animation Queue
        var firing = false //Animation lock
        var first = true; //Triggered through add interface

var getStyle = function(obj, attr) {
                  return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, false)[attr];
}
//These are all specific animation effects, there is nothing difficult to understand
        var makeAnim = function(element, options, func) {
            var width = options.width
// Packaged a specific execution algorithm
                            //css3
                          //setTimeout
                element.style.webkitTransitionDuration = '2000ms';
                  element.style.webkitTransform = 'translate3d(' width 'px,0,0)';

//Monitoring animation completed
               element.addEventListener('webkitTransitionEnd', function() {
                  func()
            });
}

var _fire = function() {
//The added animation is being triggered
                if (!fireing) {
            var onceRun = Queue.shift();
                     if (onceRun) {
//Prevent repeated triggering
                    firing = true;
                            //next
                     onceRun(function() {
fire = false;
//The effect of serial calls is very cleverly produced here
                        _fire();
                     });
                     } else {
                    firing = true;
                }
            }
}

return self = {
//Add queue
               add: function(element, options) {
//Here is the key to the entire algorithm
//Equivalent to adding a function to the array
//[function(func){},...]
                              // That is the onceRun method in _fire, and func was passed in at that time.
                               // Aaron likes to use this technique in his programming, such as pre-compilation and so on.
Queue.push(function(func) {
                         makeAnim(element, options, func);
                });

//If there is a queue, trigger the animation immediately
If (first && Queue.length) {
//This switch plays a very good role in controlling the queuing of elements added later
                      1st = false;
//This is equivalent to running _fire();
directly // Aaron likes to install A, deliberately add a self.fire, maybe he is far -sighted
                        self.fire();
                }
            },
//Trigger
Fire: function() {
                   _fire();
            }
}
}();

aQuery.fn = aQuery.prototype = {
         run: function(options) {
animation.add(this.element, options);
              return this;
}
}

var init = aQuery.fn.init = function(selector) {
        var match = rquickExpr.exec(selector);
         var element = document.getElementById(match[1])
This.element = element;
         return this;
}
//I almost underestimated this line of code
//I learned how to use jquery well
//Isn’t it better to directly aQuery.fn.init = aQuery.fn?
//One more init variable is just to reduce queries, the idea of ​​optimization is everywhere.
init.prototype = aQuery.fn;
Return aQuery;
}());

//dom
var oDiv = document.getElementById('div1');

//Call
oDiv.onclick = function() {

$('#div1').run({
         'width': '500'
}).run({
        'width': '300'
}).run({
        'width': '1000'
});
};

Attach the html and you can adjust it yourself. Remember to use chrome to browse.

Copy code The code is as follows:
Click

I hope this article will be helpful to everyone’s jQuery programming.

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

CLIP-BEVFormer: Explicitly supervise the BEVFormer structure to improve long-tail detection performance CLIP-BEVFormer: Explicitly supervise the BEVFormer structure to improve long-tail detection performance Mar 26, 2024 pm 12:41 PM

Written above & the author’s personal understanding: At present, in the entire autonomous driving system, the perception module plays a vital role. The autonomous vehicle driving on the road can only obtain accurate perception results through the perception module. The downstream regulation and control module in the autonomous driving system makes timely and correct judgments and behavioral decisions. Currently, cars with autonomous driving functions are usually equipped with a variety of data information sensors including surround-view camera sensors, lidar sensors, and millimeter-wave radar sensors to collect information in different modalities to achieve accurate perception tasks. The BEV perception algorithm based on pure vision is favored by the industry because of its low hardware cost and easy deployment, and its output results can be easily applied to various downstream tasks.

How to set up ppt animation to enter first and then exit How to set up ppt animation to enter first and then exit Mar 20, 2024 am 09:30 AM

We often use ppt in our daily work, so are you familiar with every operating function in ppt? For example: How to set animation effects in ppt, how to set switching effects, and what is the effect duration of each animation? Can each slide play automatically, enter and then exit the ppt animation, etc. In this issue, I will first share with you the specific steps of entering and then exiting the ppt animation. It is below. Friends, come and take a look. Look! 1. First, we open ppt on the computer, click outside the text box to select the text box (as shown in the red circle in the figure below). 2. Then, click [Animation] in the menu bar and select the [Erase] effect (as shown in the red circle in the figure). 3. Next, click [

Implementing Machine Learning Algorithms in C++: Common Challenges and Solutions Implementing Machine Learning Algorithms in C++: Common Challenges and Solutions Jun 03, 2024 pm 01:25 PM

Common challenges faced by machine learning algorithms in C++ include memory management, multi-threading, performance optimization, and maintainability. Solutions include using smart pointers, modern threading libraries, SIMD instructions and third-party libraries, as well as following coding style guidelines and using automation tools. Practical cases show how to use the Eigen library to implement linear regression algorithms, effectively manage memory and use high-performance matrix operations.

Explore the underlying principles and algorithm selection of the C++sort function Explore the underlying principles and algorithm selection of the C++sort function Apr 02, 2024 pm 05:36 PM

The bottom layer of the C++sort function uses merge sort, its complexity is O(nlogn), and provides different sorting algorithm choices, including quick sort, heap sort and stable sort.

Improved detection algorithm: for target detection in high-resolution optical remote sensing images Improved detection algorithm: for target detection in high-resolution optical remote sensing images Jun 06, 2024 pm 12:33 PM

01 Outlook Summary Currently, it is difficult to achieve an appropriate balance between detection efficiency and detection results. We have developed an enhanced YOLOv5 algorithm for target detection in high-resolution optical remote sensing images, using multi-layer feature pyramids, multi-detection head strategies and hybrid attention modules to improve the effect of the target detection network in optical remote sensing images. According to the SIMD data set, the mAP of the new algorithm is 2.2% better than YOLOv5 and 8.48% better than YOLOX, achieving a better balance between detection results and speed. 02 Background & Motivation With the rapid development of remote sensing technology, high-resolution optical remote sensing images have been used to describe many objects on the earth’s surface, including aircraft, cars, buildings, etc. Object detection in the interpretation of remote sensing images

Can artificial intelligence predict crime? Explore CrimeGPT's capabilities Can artificial intelligence predict crime? Explore CrimeGPT's capabilities Mar 22, 2024 pm 10:10 PM

The convergence of artificial intelligence (AI) and law enforcement opens up new possibilities for crime prevention and detection. The predictive capabilities of artificial intelligence are widely used in systems such as CrimeGPT (Crime Prediction Technology) to predict criminal activities. This article explores the potential of artificial intelligence in crime prediction, its current applications, the challenges it faces, and the possible ethical implications of the technology. Artificial Intelligence and Crime Prediction: The Basics CrimeGPT uses machine learning algorithms to analyze large data sets, identifying patterns that can predict where and when crimes are likely to occur. These data sets include historical crime statistics, demographic information, economic indicators, weather patterns, and more. By identifying trends that human analysts might miss, artificial intelligence can empower law enforcement agencies

Application of algorithms in the construction of 58 portrait platform Application of algorithms in the construction of 58 portrait platform May 09, 2024 am 09:01 AM

1. Background of the Construction of 58 Portraits Platform First of all, I would like to share with you the background of the construction of the 58 Portrait Platform. 1. The traditional thinking of the traditional profiling platform is no longer enough. Building a user profiling platform relies on data warehouse modeling capabilities to integrate data from multiple business lines to build accurate user portraits; it also requires data mining to understand user behavior, interests and needs, and provide algorithms. side capabilities; finally, it also needs to have data platform capabilities to efficiently store, query and share user profile data and provide profile services. The main difference between a self-built business profiling platform and a middle-office profiling platform is that the self-built profiling platform serves a single business line and can be customized on demand; the mid-office platform serves multiple business lines, has complex modeling, and provides more general capabilities. 2.58 User portraits of the background of Zhongtai portrait construction

PHP algorithm analysis: efficient method to find missing numbers in an array PHP algorithm analysis: efficient method to find missing numbers in an array Mar 02, 2024 am 08:39 AM

PHP algorithm analysis: An efficient method to find missing numbers in an array. In the process of developing PHP applications, we often encounter situations where we need to find missing numbers in an array. This situation is very common in data processing and algorithm design, so we need to master efficient search algorithms to solve this problem. This article will introduce an efficient method to find missing numbers in an array, and attach specific PHP code examples. Problem Description Suppose we have an array containing integers between 1 and 100, but one number is missing. We need to design a

See all articles