Implémentation de l'effet jQuery-js tutoriel-php.cn

Implémentation de l'effet jQuery

一个新手

Libérer： 2017-10-10 10:13:55

original

1384 Les gens l'ont consulté

Masquer/Afficher

Les fonctions hide() et show() dans jQuery sont utilisées pour contrôler le masquage et l'affichage des éléments, en appelant format Comme suit :

$(selector).hide(speed,callback);
$(selector).show(speed,callback);

Copier après la connexion

Pour combiner les deux méthodes ci-dessus, ce sont les deux paramètres de la fonction bascule
Le paramètre speed contrôle la vitesse à laquelle l'élément est masqué/affiché (la valeur. peut être lent, rapide ou un temps auto-défini, l'unité est la milliseconde Veuillez noter que lent et rapide doivent être mis entre guillemets ), le rappel peut être transmis à la fonction, qui est déclenchée après le l'action de masquage ou d'affichage est terminée, par exemple :

<!DOCTYPE html><html><head>
  <title>jQuery-效果</title>
  <script type="text/javascript"  src="jquery-3.2.1.js"></script>
  <style type="text/css">
    *{      
    margin: 0px;      
    padding: 0px;      
    font-size: 20px;      
    font-weight: bold;    
    }
  </style></head><body>
  <p id="p1">Hello jQuery!</p>
  <button id="btn_hide">HIDE</button>
  <button id="btn_show">SHOW</button>
  <button id="btn_toggle">TOGGLE</button><!-- 使用jQuery进行元素的隐藏与显示的基本格式是： 
  $(selector).event(speed,callback) -->

  <script type="text/javascript">
    $(document).ready(function(){
      $("#btn_hide").click(function(){
        $("#p1").hide(2000,function(){
          alert("HIDE!");         //动作完成之后弹出消息框
        });
      });
      $("#btn_show").click(function(){
        $("#p1").show();
      });
      $("#btn_toggle").click(function(){
        $("#p1").toggle();
      });
    });  </script></body></html>

Copier après la connexion

Effet de fondu

L'effet de fondu est fondamentalement le même que les fonctions de masquage et d'affichage, mais en plus à cela il y a une autre fonction, fadeTo(), cette fonction est utilisée pour changer la transparence des éléments, le format est le suivant :

$(selector).fadeTo(speed,opacity,callback);

Copier après la connexion

Les deux premiers paramètres doivent être passés, et l'opacité est un décimal entre 0 et 1. Exemples sont les suivants :

<!DOCTYPE html><html><head>
  <title>jQuery-效果</title>
  <script type="text/javascript"  src="jquery-3.2.1.js"></script>
  <style type="text/css">
    *{      
    margin: 5px;     
    padding: 0px;      
    font-size: 20px;      
    font-weight: bold;    
    }
  </style></head><body>
  <p id="p2">Hello jQuery!</p>
  <button id="btn_fadein">FADEIN</button>
  <button id="btn_fadeout">FADEOUT</button>
  <button id="btn_fadetoggle">FADETOGGLE</button>
  <button id="btn_fadeto">FADETO</button><!-- 使用jQuery进行元素的隐藏与显示的基本格式是： $(selector).event(speed,callback) --><!-- 其实jQuery的很多效果都是这样的用法，比如淡入淡出的效果也是这样的参数 -->

  <script type="text/javascript">
    $(document).ready(function(){
      $("#btn_fadein").click(function(){         //淡入淡出的效果展示
        $("#p2").fadeIn(1000);
      });
      $("#btn_fadeout").click(function(){
        $("#p2").fadeOut(1000);
      });
      $("#btn_fadetoggle").click(function(){
        $("#p2").fadeToggle(1000);
      });
      $("#btn_fadeto").click(function(){
        $("#p2").fadeTo("slow",0.5);          //注意slow要加上引号！！，前两个参数是必须要传入的
      });
    });  </script></body></html>

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!