communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > js tutoriel > Exemple de l'effet de fondu d'entrée et de sortie le plus basique basé sur jQuery_jquery

Exemple de l'effet de fondu d'entrée et de sortie le plus basique basé sur jQuery_jquery

WBOY
Libérer： 2016-05-16 16:16:22
original
880 Les gens l'ont consulté

L'exemple de cet article décrit comment obtenir l'effet de fondu d'entrée et de sortie le plus basique basé sur jQuery. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

jQuery est une bibliothèque JavaScript, qui est une extension de JavaScript, utilisée pour répondre aux besoins croissants de différents effets spéciaux. Son essence est JavaScript

Écrivons un programme JQ de base pour illustrer JQ.

1. Objectifs de base

Il y a les trois boutons suivants sur la page Web. L'un peut uniquement masquer le texte, l'autre peut uniquement afficher le texte et l'autre peut masquer et afficher le texte en même temps. Cliquez une fois pour afficher, cliquez à nouveau pour masquer, et le bouton suivant est affiché. le cycle est sans fin. Comme indiqué ci-dessous :

2. Processus de production

1. Tout d'abord, vous devez télécharger un fichier de support JQ depuis le site officiel de JQ et le placer dans le dossier de votre site. Ce fichier de support est jQuery1.11 (cliquez pour ouvrir le lien). Vous pouvez accéder au site officiel de jQuery pour télécharger jQuery1.11 qui est compatible avec l'ancien navigateur IE6 (cliquez pour ouvrir le lien), au lieu de jQuery2 qui ne l'est pas. compatible avec l'ancien navigateur IE6.

2. Le code complet de la page Web est le suivant, divisé en fragments pour explication :

Copier le code Le code est le suivant :
 
 
     
         
         
        <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> 
         
 
 
        JQ淡出与显示 
         
    ≪/tête> 
     
        
   

 
        被折腾的文本 
   

 
     
     
        隐藏 
     
     
        显示 
     
     
        隐藏/显示 
      
     

（1）部分

复制代码 代码如下 :


Le texte lancé

     
Masquer
Afficher
Masquer/afficher




(2)



Copier le code


Le code est le suivant :
<script> <!--Lors de l'écriture du code JQ, vous devez d'abord utiliser $(document).ready(function() {}); Sans le cadre fourni par cette fonction, les choses ne peuvent pas être exécutées--> <p>             $(document).ready(function() {                                             & Lt;!-Ensuite, écrivez les fonctions requises dans cette fonction-& gt;                                                                                                                                                                                                                                                                                                                  $("#hide").click(function() {                                            dans                     $("#text").hide();               });                                             $("#show").click(function() { <br> dans                      $("#text").show();               });                            $("#toggle").click(function() { </p> <div class="codetitle">                                                                                                                                                                                                       $("#text").toggle();               });                                     });   </script>