Heim > Artikel > Web-Frontend > Der Unterschied zwischen hide und fadeOut in jQuery Der Unterschied zwischen show und fadeIn

Der Unterschied zwischen hide und fadeOut in jQuery Der Unterschied zwischen show und fadeIn

巴扎黑Original: 2017-06-29 11:59:561515Durchsuche

Was ist der Unterschied zwischen den Anzeigeeffekten von

hide und fadeOut ? show und fadeIn haben den gleichen Anzeigeeffekt?

Viele Freunde werden beim Lernen von jQuery, ausblenden auf dieses Problem stoßen und fadeOut können beide Parameter haben:
$(selector).hide(speed,callback);
$(selector).fadeOut(speed,callback);
Das können wir zunächst am Namen erkennen hide bedeutet Verstecken und fadeOut bedeutet Ausblenden. Natürlich ist der konkrete Unterschied nicht im Namen zu sehen, er kann nur widerspiegeln, dass sie unterschiedlich sind. Aber wenn wir die Parameter Geschwindigkeit etwas länger einstellen, können wir den Unterschied sehen. Und die erzielten Wirkungen scheinen ähnlich zu sein, daher wird fälschlicherweise angenommen, dass sie gleich sind, was aber nicht der Fall ist.

Schreiben wir den folgenden Code:

<!DOCTYPE html><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type=text/
javascript
 src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(
document
).ready(function(){
  $("button.dl").click(function(){
    $("#p1").fadeOut(3000);
  });
});
$(document).ready(function(){
  $("button.dll").click(function(){
    $("#p2").hide(3000);
  });
});
</script>
</head>
<body>
<p>演示带有不同参数的 fadeOut() 方法。</p>
<button class="dl">点击这里，使红色矩形1淡出(fadeOut)</button>
<br><br>
<p id="p1" style="width:80px;height:80px;
background-color
:red;"></p>
<br><br>
<button  class="dll">点击这里，使红色矩形2隐藏(hide)</button>
<br><br>
<p id="p2" style="width:80px;height:80px;background-color:red;"></p>
</body>
</html>

Okay, jetzt Wir können es testen und den Unterschied auf einen Blick erkennen.

Ja, versteckenDer versteckte Effekt ist ein langsames Falten und Schrumpfen von unten nach oben oder von unten rechts nach oben links , und fadeOut besteht darin, bis verschwindet. Okay, jetzt können wir es testen und den Unterschied auf einen Blick sehen.

Ähnlich sind auch

show und fadeIn Dies Der Unterschied besteht darin, dass wir es versuchen, indem wir den Code selbst ändern.

Das obige ist der detaillierte Inhalt vonDer Unterschied zwischen hide und fadeOut in jQuery Der Unterschied zwischen show und fadeIn. 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：Erfahren Sie mehr über die Verwendung der fadeOut()-Methode in jQueryNächster Artikel：Erfahren Sie mehr über die Verwendung der fadeOut()-Methode in jQuery

In Verbindung stehende Artikel

Mehr sehen