Use queue to simulate jquery animation algorithm example_jquery
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.
/**
(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.
I hope this article will be helpful to everyone’s jQuery programming.

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

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.

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 [

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.

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.

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

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

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: 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
