Maison >interface Web >js tutoriel >Implémentation de l'effet jQuery

Implémentation de l'effet jQuery

一个新手original: 2017-10-10 10:13:551399parcourir

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);

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>

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);

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>

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Existe-t-il des méthodes intégrées dans Angularjs ?Article suivant：Existe-t-il des méthodes intégrées dans Angularjs ?

Articles Liés

Voir plus