Thoughts on the fade-in and fade-out effects of fadeIn (), fadeOut (), fadeToggle (), and fadeTo () in Jquery ---- about parameters passing through Jquery Functions
I. Basic syntax
1. fadeIn fade-in, fadeOut fade-out, and fadeToggle fade-in and fade-in switching (Fade-in and click fade-in, or vice versa ):
$(selector).fadeIn(duration,complete);
$(selector).fadeOut(duration,complete);
$(selector).fadeToggle(duration,complete);
The optional speed parameter specifies the duration of the effect. It can take the following values: "slow" (200 ms), "fast" (600 ms), or millisecond. [Default Value: Ms]
The optional callback parameter is the name of the function executed after fading is complete.
2. fadeTo: The jQuery fadeTo () method allows the gradient to be set to a given opacity (value between 0 and 1 ).
$(selector).fadeTo(speed,opacity,callback);
The required speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or millisecond.
The required opacity parameter in the fadeTo () method sets the fade-in and fade-out effect to a given opacity (value between 0 and 1 ).
The optional callback parameter is the name of the function executed after the function is completed.
Ii. Method 1: inline call (anonymous function)
<Script src = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"> </script> <script> $ (document ). ready (function () {$ ("button "). click (function () {$ ("# div1 "). fadeIn (); $ ("# div2 "). fadeIn ("slow"); $ ("# div3 "). fadeIn (3000, function () {document. getElementById ("pp "). innerHTML = "The effect is displayed! ";}); </Script> Demonstrate the fadeIn () method with different parameters.
Testing
Click here to fade the three rectangles
That is, write the function directly at callback.
2. External calls
<Script src = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"> </script> <script type = "text/javascript"> function myFunc () {document. getElementById ("pp "). innerHTML = "The effect is also displayed! ";};$ (Document ). ready (function () {$ ("button "). click (function () {$ ("# div1 "). fadeIn ("slow"); $ ("# div2 "). fadeIn ("fast"); $ ("# div3 "). fadeIn (3000, myFunc) ;};}); </script>Demonstrate the fadeIn () method with different parameters.
Testing
Click here to fade the three rectangles
Iii. New API
There are three new API parameters, and the callback (complete) parameter is the last one. why can it be correctly executed?
This is one of the JS features. I have never seen such a function call before (because there are all default values), and I found that I didn't pass the myFunc function to the Jquery function at all! This requires a deep dive into what is the So JS function?
Iv. JS function Overloading
All those who have experience in C-series language learning know that the consistency check will be performed for function passing parameters, and the type of parameters will be checked for how many parameters you pass. However, the preceding example shows that javascript does not have such consistency check! It seems that he can accept multiple data transfers and less data transfers. After verification, make sure that this is the case. You can pass many parameters.
Another problem is that it seems that the interval transmission is okay ?! This is amazing. Why? I haven't thought about it for a long time! Check the source code and find many jQuery. extend methods. The cause is that the function is overloaded. However, we noticed that JavaScript and C ++ are different. C ++ will check the parameters, but it will not work. Therefore, you can directly define multiple parameter types or different numbers of functions with the same name to implement overloading, JS, no matter how many parameters you have, only the preceding valid parameters. So how to implement JS function overloading? There are many methods!
1. implemented using arguments;
2. Use typeof to determine the parameter type;
However, these two methods have great limitations. If there are many processing parameters, isn't the heavy load logic very complicated !? Is there a good way?
I finally found that there are no excellent methods yet, but I saw several good articles.
Allows JavaScript to easily support function Overloading
Http://vilic.info/blog/archives/tag/%E5%87%BD%E6%95%B0%E9%87%8D%E8%BD%BD
This article is organized by @ The_Third_Wave (Blog address: http://blog.csdn.net/zhanh1218. Otherwise, it will be updated from time to time. please correct me if any error occurs.
If you find this Blog post incomplete, that is why I want to prevent crawlers from releasing them in half. Please refer to the original author's Blog.
If this blog post is helpful to you, you are not recommended to repost it for a good network environment. We recommend that you add it to your favorites! If you must reprint the content, please include the suffix and the address of this article.