jQuery UI API - .hide()

Kategorie

Effekte | Effekte-Kern | Methodenüberschreibungen | Methoden

Nutzung

Beschreibung:Verwenden Sie einen benutzerdefinierten Effekt, um übereinstimmende Elemente auszublenden.

Gibt zurück:jQuery

.hide( effect [, options ] [, duration ] [, complete ] )

Parameters Type Beschreibung Standard
effect String Ein String, der angibt, welcher Effekt verwendet werden soll.
options Objekt Effektspezifische Einstellungen undeasing。
duration Number oder String Ein String oder eine Zahl, die bestimmt, wie lange die Animation ausgeführt wird. 400
complete Function() Eine Funktion, die aufgerufen wird, sobald die Animation abgeschlossen ist.

.hide( options )

Parameters Type Beschreibung
options Objekt Alle Animationseinstellungen. Die einzige erforderliche Eigenschaft ist effect.
  • effect
    Typ: String
    Beschreibung: Ein String, der angibt, welcher Effekt verwendet werden soll.
  • easing(Standard:"swing"）
    Typ: String
    Beschreibung: Ein String, der dieEasing-Funktion angibt.
  • duration(Standard:400）
    Typ: Number oder String
    Beschreibung: Ein String oder eine Zahl, die bestimmt, wie lange die Animation ausgeführt wird.
  • complete
    Typ: Function()
    Beschreibung: Eine Funktion, die aufgerufen wird, sobald die Animation abgeschlossen ist.
  • queue(Standard:true）
    Typ: Boolean oder String
    Beschreibung: Ein boolescher Wert, der angibt, ob die Animation in die Effekt-Warteschlange gestellt werden soll. Wenn false, beginnt die Animation sofort.Ab jQuery 1.7akzeptiert die Option queue auch einen String; in diesem Fall wird die Animation der Warteschlange hinzugefügt, die durch diesen String dargestellt wird.

Dieses Plugin erweitert die in jQuery integrierte.hide()-Methode. Wenn jQuery UI nicht geladen ist, wird der Aufruf der.hide()Methode nicht direkt fehlschlagen, weil die Methode bereits in jQuery existiert. Das erwartete Verhalten tritt jedoch nicht auf.

Beispiel

Verwenden Sie den Drop-Effekt, um ein div auszublenden.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>.hide() 演示</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <style>
  div {
    width: 100px;
    height: 100px;
    background: #ccc;
    border: 1px solid #000;
  }
  </style>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
 
<button>隐藏 div</button>
<div></div>
 
<script>
$( "button" ).click(function() {
  $( "div" ).hide( "drop", { direction: "down" }, "slow" );
});
</script>
 
</body>
</html>

Andere Erweiterungen