suchen

Heim >Web-Frontend >js-Tutorial >Implementierung des jQuery-Effekts

Implementierung des jQuery-Effekts

一个新手
一个新手Original
2017-10-10 10:13:551367Durchsuche


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

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>

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

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>

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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Gibt es integrierte Methoden in AngularJS?Nächster Artikel：Gibt es integrierte Methoden in AngularJS?

In Verbindung stehende Artikel

Mehr sehen