Implementierung des jQuery-Effekts-js-Tutorial-php.cn

Implementierung des jQuery-Effekts

一个新手

Freigeben： 2017-10-10 10:13:55

Original

1385 Leute haben es durchsucht

Ausblenden/Anzeigen

Die Funktionen hide() und show() in jQuery werden verwendet, um das Ausblenden und Anzeigen von Elementen zu steuern und aufzurufen Format wie folgt:

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

Nach dem Login kopieren

Um die beiden oben genannten Methoden zu kombinieren, gibt es zwei Parameter in der Umschaltfunktion
Der Geschwindigkeitsparameter steuert die Geschwindigkeit, mit der das Element ausgeblendet/angezeigt wird (der Wert kann Sei langsam, schnell oder eine selbstdefinierte Zeit, die Einheit ist Millisekunden Bitte beachten Sie, dass langsam und schnell in Anführungszeichen gesetzt werden müssen ), ein Rückruf kann an die Funktion übergeben werden, die nach dem Ausblenden ausgelöst wird oder die Show-Aktion ist abgeschlossen, zum Beispiel:

<!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>

Nach dem Login kopieren

Fade-Effekt

Der Fade-Effekt ist grundsätzlich derselbe wie die Ein- und Ausblenden-Funktionen, jedoch zusätzlich zu Dazu gibt es eine weitere Funktion, fadeTo(). Diese Funktion wird zum Ändern der Transparenz von Elementen verwendet. Das Format lautet wie folgt:

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

Nach dem Login kopieren

Die ersten beiden Parameter müssen übergeben werden, und die Deckkraft ist eine Dezimalzahl zwischen 0 und 1. Beispiele sind wie folgt:

<!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>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonImplementierung des jQuery-Effekts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!