jQuery UI API - .toggleClass()

Kategorie

Effekte | Effekt-Kern | Methodenüberschreibungen

Nutzung

Beschreibung:Beim Animieren von Stiländerungen wird für jedes Element in der übereinstimmenden Menge eine oder mehrere Klassen hinzugefügt oder entfernt, je nachdem, ob die Klasse vorhanden ist und welchen Wert der switch-Parameter hat.

Gibt zurück:jQuery

.toggleClass( className [, switch ] [, duration ] [, easing ] [, complete ] )

Parameters Type Beschreibung Standardwert
ClassName String Ein oder mehrere Klassennamen, die für jedes Element in der übereinstimmenden Menge umgeschaltet werden sollen, getrennt durch Leerzeichen.
switch Boolean Ein boolescher Wert, der angibt, ob die Klasse hinzugefügt oder entfernt werden soll.
duration Number oder String Eine Zeichenkette oder Zahl, die angibt, wie lange die Animation dauern soll. 400
easing String Eine Zeichenkette, die dieeasing-Funktion angibt. swing
complete Function() Funktion, die aufgerufen wird, sobald die Animation abgeschlossen ist.

.toggleClass( className [, switch ] [, options ] )

Parameters Type Beschreibung
ClassName String Ein oder mehrere Klassennamen, die für jedes Element in der übereinstimmenden Menge umgeschaltet werden sollen, getrennt durch Leerzeichen.
switch Boolean Ein boolescher Wert, der angibt, ob die Klasse hinzugefügt oder entfernt werden soll.
options Objekt Alle Animationseinstellungen. Alle Eigenschaften sind optional.
  • duration(Standardwert:400）
    Typ: Number oder String
    Beschreibung: Eine Zeichenkette oder Zahl, die angibt, wie lange die Animation dauern soll.
  • easing(Standardwert:swing）
    Typ: String
    Beschreibung: Ein String, der dieEasing-Funktion angibt.
  • complete
    Typ: Function()
    Beschreibung: Funktion, die aufgerufen wird, sobald die Animation abgeschlossen ist.
  • children(Standardwert:false）
    Typ: Boolean
    Beschreibung: Gibt an, ob die Animation auf alle Nachfahren der übereinstimmenden Elemente angewendet werden soll. Diese Funktionalität sollte mit Vorsicht verwendet werden, da es sehr kostspielig ist festzustellen, ob ein Element ein Nachfahre des animierten Elements ist, und linear mit der Anzahl der Nachfahren wächst.
  • queue(Standardwert: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.7akzeptiert die queue-Option auch eine Zeichenkette; in diesem Fall wird die Animation zu der durch diese Zeichenkette dargestellten Warteschlange hinzugefügt.

Ähnlich wie native CSS-Übergänge bieten die Klassenanimationen von jQuery UI einen sanften Übergang von einem Zustand in einen anderen und stellen dabei sicher, dass alle Details der Stiländerung durch CSS verarbeitet werden, ohne dass JavaScript erforderlich ist. Alle Klassenanimationsmethoden, einschließlich.toggleClass(), ermöglichen eine benutzerdefinierte Animationsdauer undEasingEasing-Funktion und bieten außerdem einen Callback, wenn die Animation abgeschlossen ist.

Nicht alle Stile können animiert werden. Beispielsweise können Hintergrundbilder nicht animiert werden. Jeder Stil, der nicht animiert werden kann, ändert sich am Ende der Animation.

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

Beispiel

Schaltet die Klasse "big-blue" für die übereinstimmenden Elemente um.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>.toggleClass() 演示</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <style>
  div {
    width: 100px;
    height: 100px;
    background-color: #ccc;
  }
  .big-blue {
    width: 200px;
    height: 200px;
    background-color: #00f;
  }
  </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>
 
<div></div>
 
<script>
$( "div" ).click(function() {
  $( this ).toggleClass( "big-blue", 1000, "easeOutSine" );
});
</script>
 
</body>
</html>

Weitere Erweiterungen