jQuery UI API - .show()

Kategorie

Effekte | Effekte-Kern | Methodenüberschreibungen | Methoden

Nutzung

Beschreibung:Zeigt die übereinstimmenden Elemente mithilfe eines benutzerdefinierten Effekts an.

Gibt zurück:jQuery

.show( 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.

.show( 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 die zu verwendendeeasing-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.Seit jQuery 1.7,akzeptiert die Option queue auch einen String; in diesem Fall wird die Animation der durch diesen String repräsentierten Warteschlange hinzugefügt.

Das Plugin erweitert die integrierte.show()-Methode von jQuery. Wenn jQuery UI nicht geladen ist, wird beim Aufruf der.show()Methode nicht direkt fehl, weil die Methode in jQuery existiert. Das erwartete Verhalten tritt jedoch nicht auf.

Beispiele

Verwenden Sie den Fold-Effekt, um ein div anzuzeigen.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>.show() 演示</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <style>
  div {
    display: none;
    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" ).show( "fold", 1000 );
});
</script>
 
</body>
</html>

Weitere Erweiterungen