Example of the most basic fade-in and fade-out effect based on jQuery_jquery

The example in this article describes how to achieve the most basic fade-in and fade-out effect based on jQuery. Share it with everyone for your reference. The specific analysis is as follows:

jQuery is a JavaScript library, which is an extension of JavaScript, used to meet the increasing needs for different special effects. Its essence is JavaScript

Let’s write a basic JQ program to illustrate JQ.

1. Basic goals

There are the following three buttons on the web page. One can only hide text, one can only display text, and one can hide and display text at the same time. Click once to display, click again to hide, and the cycle is endless. As shown below:

2. Production process

1. First, you need to download a JQ support file from the JQ official website and put it into your site folder. This support file is jQuery1.11 (click to open the link). You can go to the jQuery official website to download jQuery1.11 that is compatible with the old browser IE6 (click to open the link), instead of jQuery2 that is not compatible with the old browser IE6.

2. The entire web page code is as follows, divided into fragments for explanation:

Copy code The code is as follows:

 
 
     
         
         
        <script>  <br>             $(document).ready(function() {  <br>                 $("#hide").click(function() {  <br>                     $("#text").hide();  <br>                 });  <br>                 $("#show").click(function() {  <br>                     $("#text").show();  <br>                 });  <br>                 $("#toggle").click(function() {  <br>                     $("#text").toggle();  <br>                 });  <br>             });  <br>         </script> 
         
 
 
         
         
     
     
        
   

 
        被折腾的文本 
   

 
     
     
        隐藏 
     
     
        显示 
     
     
        隐藏/显示 
      
     

（1）部分
部分主要是实现核心代码部分，放在后面来讲，先说部分

复制代码 代码如下:

The tossed text

     


Hide


Show


Hide/show

(2) part

Copy code The code is as follows:

<script> <br> <!--When writing JQ code, you must first use $(document).ready(function() {}); to define a total function. Without the framework provided by this function, things cannot be executed--> <br>             $(document).ready(function() {                                             & Lt;!-Then write the required functions in this function-& gt; <br>                                                                                                                                                                                                                                                                                                                  $("#hide").click(function() {                                                                                                                                                                                                                                                                                       in                      $("#text").hide(); <br>               });                                             $("#show").click(function() { <br>                                                                                                                                                                                                                                                                                               in                       $("#text").show(); <br>               });                            $("#toggle").click(function() { <br>                                                                                                                                                                                                                           $("#text").toggle(); <br>               });                                     }); <br> </script>