API de jQuery UI - .toggleClass()

Catégorie

Effets | Cœur des effets | Redéfinitions de méthodes

Utilisation

Description :Lors de l'animation des changements de style, ajoutez ou supprimez une ou plusieurs classes à chaque élément de l'ensemble correspondant, selon que la classe existe et la valeur du paramètre switch.

Retourne :jQuery

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

Parameters Type Description Valeur par défaut
ClassName String Un ou plusieurs noms de classes à basculer pour chaque élément de l'ensemble correspondant, séparés par des espaces.
switch Boolean Une valeur booléenne indiquant si la classe doit être ajoutée ou supprimée.
duration Nombre ou chaîne de caractères Une chaîne ou un nombre spécifiant la durée de l'animation. 400
easing String Une chaîne indiquant la fonctioneasing. swing
complete Function() Fonction à appeler une fois l'animation terminée.

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

Parameters Type Description
ClassName String Un ou plusieurs noms de classes à basculer pour chaque élément de l'ensemble correspondant, séparés par des espaces.
switch Boolean Une valeur booléenne indiquant si la classe doit être ajoutée ou supprimée.
options Object Tous les paramètres d'animation. Toutes les propriétés sont facultatives.
  • duration(Valeur par défaut :400）
    Type : Number ou String
    Description : Une chaîne ou un nombre spécifiant la durée de l'animation.
  • easing(Valeur par défaut :swing）
    Type : String
    Description : une chaîne indiquant la fonction d'easing.
  • complete
    Type : Function()
    Description : Fonction à appeler une fois l'animation terminée.
  • children(Valeur par défaut :false）
    Type : Boolean
    Description : Indique si l'animation doit être appliquée à tous les descendants des éléments correspondants. Cette fonctionnalité doit être utilisée avec prudence, car déterminer si un élément est un descendant de l'élément animé est très coûteux et croît linéairement avec le nombre de descendants.
  • queue(Valeur par défaut :true）
    Type : Boolean ou String
    Description : Une valeur booléenne indiquant s'il faut placer l'animation dans la file d'attente des effets. Si false, l'animation commencera immédiatement.Depuis jQuery 1.7, l'option queue accepte également une chaîne, auquel cas l'animation est ajoutée à la file d'attente représentée par cette chaîne.

Semblables aux transitions CSS natives, les animations de classe de jQuery UI assurent une transition fluide d'un état à un autre, tout en garantissant que tous les détails de changement de style sont gérés via CSS sans nécessiter JavaScript. Toutes les méthodes d'animation de classe, y compris.toggleClass(), permettent de personnaliser la durée d'animation eteasingfonction d'accélération, et fournissent également une fonction de rappel lorsque l'animation se termine.

Tous les styles ne peuvent pas être animés. Par exemple, les images d'arrière-plan ne peuvent pas être animées. Tout style qui ne peut pas être animé changera à la fin de l'animation.

Ce plugin étend la méthode intégrée.toggleClass()de jQuery. Si jQuery UI n'est pas chargé, appeler.toggleClass()la méthode n'échouera pas directement, car la méthode existe dans jQuery. Cependant, le comportement attendu ne se produira pas.

Exemple

Basculer la classe "big-blue" pour les éléments correspondants.

<!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>

Autres extensions