API jQuery UI - .removeClass()

Catégorie

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

Utilisation

Description :Pendant l'animation des changements de style, supprime la classe spécifiée de chaque élément de l'ensemble des éléments correspondants.

Retourne :jQuery

.removeClass( className [, duration ] [, easing ] [, complete ] )

Parameters Type Description Default
className String Un ou plusieurs noms de classes à supprimer de l'attribut class de chaque élément correspondant, séparés par des espaces.
duration Nombre ou chaîne de caractères Une chaîne ou un nombre qui spécifie la durée d'exécution de l'animation. 400
easing String Une chaîne indiquant la fonctioneasingà utiliser. swing
complete Function() Une fonction à appeler une fois l'animation terminée.

.removeClass( className [, options ] )

Parameters Type Description
className String Un ou plusieurs noms de classes à supprimer de l'attribut class de chaque élément correspondant, séparés par des espaces.
options Object Toutes les options d'animation. Toutes les propriétés sont facultatives.
  • duration(Par défaut :400）
    Type : Number ou String
    Description : une chaîne ou un nombre qui spécifie la durée d'exécution de l'animation.
  • easing(Par défaut :swing）
    Type : String
    Description : une chaîne indiquant la fonctioneasingà utiliser.
  • complete
    Type : Function()
    Description : une fonction à appeler une fois l'animation terminée.
  • children(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'animation est coûteux et croît linéairement avec le nombre de descendants.
  • queue(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.7l'option queue accepte également une chaîne, auquel cas l'animation est ajoutée à la file d'attente représentée par la chaîne.

Semblables aux transitions CSS natives, les animations de classe de jQuery UI offrent 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 avoir besoin de JavaScript. Toutes les méthodes d'animation de classe, y compris.removeClass()permettent des durées d'animation personnalisées eteasingdes fonctions d'accélération, et fournissent également un rappel lorsque l'animation est terminée.

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

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

Exemples

Supprimez la classe "big-blue" des éléments correspondants.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>.removeClass() 演示</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 class="big-blue"></div>
 
<script>
$( "div" ).click(function() {
  $( this ).removeClass( "big-blue", 1000, "easeInBack" );
});
</script>
 
</body>
</html>

Autres extensions