Home > Developer > Web Develop
This article is based on the JQuery2.0.3 version, Http://pan.baidu.com/s/1hrH1jne
Before we look at the source code, we'll look at some small exercise effects.
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Document</title> <style>#div1{width:300px;Height:300px;background:Red;} </style></Head><Body> <inputtype= "button"value= "Tap"ID= "BTN"> <DivID= "Div1"></Div> <Scriptsrc= "Jquery-2.0.3.js"></Script> <Script> $(function(){ $('#btn'). Click (function() { $('#div1'). Toggle ( -); Change the width and height transparency
//$ (' #div1 '). Slidetoggle (500); Swipe up and down
$ (' #div1 '). Fadetoggle (500); Fade in and fade
});; }); </ Script > </ Body > </ HTML >
But the bottom of these methods, actually called Animate, is to see how animate is used
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Document</title> <style>#div1{width:300px;Height:300px;background:Red;} </style></Head><Body> <inputtype= "button"value= "Tap"ID= "BTN"> <DivID= "Div1"></Div> <Scriptsrc= "Jquery-2.0.3.js"></Script> <Script> $(function(){ $('#btn'). Click (function() { //typically animate with 4 parameters //1. Name of the object to change //2. Time spent in sports //3, the form of movement by default is buffered swing, constant speed is linear generally only 2 methods, can be extended //4. Callback function $('#div1'). Animate ({width: - }, +, 'Swing', function() {alert (1); });
$ (' #div1 '). Animate ({width: ' toggle '}, 1000); I can actually write it like this! });; }); </Script></Body></HTML>
However, within the jquery source code, this is actually translated into this
$ (function () { $ (' #btn '). Click (function () { $ (' #div1 '). Animate ({width:500}, { duration:500, Easing: ' Swing ', complete:function () { alert (1); } });
This type of writing is also called configuration, the advantage is not to worry about less parameters, do not worry about parameter order });; });In 8341 lines of jquery source, Optall did it, and he turned the movement into a configuration notation.
OK, so let's analyze the first parameter first, animate the first parameter is an object that can receive values such as Width,height,opacity,
You can also receive a value such as left, right, MarginTop, paddingright, and how did he do it?
Within the source code of 8326 lines, we see a function called GenFX, his role is to collect the first parameter passed in the value
Let's take a look at how this function is implemented internally, in 8451 rows
We see that the GenFX function accepts 2 parameters, where the second parameter is a Boolean value,
You pass the argument, the value is 1, and the pass is 0.
And the variable attrs is an object, he accepts the value you passed in, such as height,width and so on, and finally returns the value.
So when we look back at the first demo, it's not hard to see, in fact, jquery inside is called the GenFX function, just use parameters to control the execution
We continue, in the source code of 8344 lines, we see such a sentence, in fact, this sentence only really realized the movement
Not to be continued ...
If you feel that this article is helpful to you, feel free to pay some tips to encourage me to write more articles.
jquery Source Code Analysis---motion animate fundamentals
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
