Heim > Artikel > Web-Frontend > So erzielen Sie einen Ein- und Ausblendeffekt in jQuery

So erzielen Sie einen Ein- und Ausblendeffekt in jQuery

清浅Original: 2019-02-12 14:26:013515Durchsuche

Es gibt vier Methoden in jQuery: fadeIn(), fadeOut(), fadeToggle(), fadeTo(). Mit diesen vier Methoden können Sie den Ein- und Ausblendeffekt erzielen

Was ich heute mitteilen möchte, ist, wie die Verwendung von jQuery zum Erzielen des Ein- und Ausblendeffekts einen gewissen Referenzeffekt hat. Ich hoffe, dass dies für alle hilfreich sein wird

[Tutorial-Empfehlung: jQuery-Tutorial】

jQuery verfügt über vier Fade-Methoden, nämlich fadeIn(), fadeOut(), fadeToggle(), fadeTo() . Als nächstes werde ich diese im Artikel ausführlich vorstellen. Wie man mit dieser Methode den Ein- und Ausblendeffekt erzielt

Die fadeIn()-Methode

wird hauptsächlich zum Einblenden versteckter Elemente verwendet. Es verfügt über zwei Parameter:

Geschwindigkeit: Gibt die Dauer des Effekts an, die „langsam“, „schnell“ oder ein benutzerdefinierter Zeitwert sein kann. Es handelt sich um einen optionalen Parameter

Callback: Gibt den Namen der Funktion an, die nach Abschluss des Einblendeffekts ausgeführt wird

fadeOut()-Methode

wird hauptsächlich zum Ausblenden des sichtbaren Elements verwendet, sein Parameterwert ist derselbe wie der Wert von fadeIn

fadeToggle()-Methode

Diese Methode kann zwischen FadeIn wechseln () und fadeOut() Methoden

fadeToggle() fügt dem Element einen Einblendeffekt hinzu, wenn es ausgeblendet ist

fadeToggle() fügt dem Element einen Ausblendeffekt hinzu wenn es eingeblendet ist

fadeTo()-Methode

fadeTo()-Methode ermöglicht einen Farbverlauf bis zu einer bestimmten Deckkraft (Wert zwischen 0 und 1)

Zusätzlich zu den Geschwindigkeits- und Rückruffunktionen ist die fadeTo-Methode Darüber hinaus gibt es einen zusätzlichen erforderlichen Deckkraftparameter, der darauf abzielt, die Deckkraft des Fade-Effekts festzulegen

Beispielfreigabe:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    #img{
      width:300px;
      height:200px;
      position: absolute;
      top:40px;
    }
    button{
      position: absolute;
      top:10px;
    }
  </style>
</head>
<body>
  <script src="./jquery/jquery-1.12.4.js"></script>
  <script>
  $(document).ready(function(){
  $("button").click(function(){
   $("#img").fadeToggle(3000).fadeTo(0.5);
  });
});
</script>
<button>点击</button>
<img  src="./images/22.jpg" id="img" alt="So erzielen Sie einen Ein- und Ausblendeffekt in jQuery" >
</body>
</html>

Rendering:

So erzielen Sie einen Ein- und Ausblendeffekt in jQuery

Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels Erfahren Sie, wie Sie den Ein- und Ausblendeffekt mit jQuery erzielen

Hinweis: Dieser Artikel bezieht sich auf den Abschnitt jQuery-Ein- und Ausblendung im jQuery-Tutorial-Handbuch

Das obige ist der detaillierte Inhalt vonSo erzielen Sie einen Ein- und Ausblendeffekt in jQuery. 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：So verwenden Sie die SuchmethodeNächster Artikel：So verwenden Sie die Suchmethode

In Verbindung stehende Artikel

Mehr sehen