Thoughts on the fade-in and fade-out effects of fadeIn (), fadeOut (), fadeToggle (), and fadeTo () in Jquery ---- about parameters passing through Jquery Functions

Source: Internet
Author: User

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.