jQuery UI API - .switchClass ()
catégorie
Effets spéciaux (effets) | Effets de base (Core Effects) | Méthode surcharge (Méthode Remplacements)
usage
Description: Lorsque les changements de style de l' animation au sein de l'ensemble des éléments appariés pour ajouter et supprimer chaque élément de la classe spécifiée.
Renvoie: le jQuery
参数 | 类型 | 描述 | 默认值 |
---|---|---|---|
removeClassName | String | 要从每个匹配的元素的 class 属性中移除的一个或多个 class 名称,多个 class 名称用空格分隔 。 | |
addClassName | String | 要添加到每个匹配的元素的 class 属性中的一个或多个 class 名称,多个 class 名称用空格分隔。 | |
duration | Number 或 String | 一个字符串或一个数字,指定动画将运行多久。 | 400 |
easing | String | 一个字符串,指示要使用的 easing 函数。 | swing |
complete | Function() | 一旦动画完成时要调用的函数。 |
参数 | 类型 | 描述 |
---|---|---|
removeClassName | String | 要从每个匹配的元素的 class 属性中移除的一个或多个 class 名称,多个 class 名称用空格分隔 。 |
addClassName | String | 要添加到每个匹配的元素的 class 属性中的一个或多个 class 名称,多个 class 名称用空格分隔。 |
options | Object | 所有的动画设置。所有的属性是可选的。
|
.switchClass()
méthode permet de transitions animées, ajouter la classe tout en enlevant la classe.
Transition similaire à la CSS native, la classe d'animation de jQuery UI fournit une transition en douceur d'un état à un autre état de transition, tout en veillant à ce que tous les détails du changement de style se fait via CSS sans utiliser JavaScript. Toutes les animations de classe, comprenant .switchClass()
, permet la durée personnalisée de l'animation et de faciliter la fonction, l'animation est terminée fournit un rappel aussi.
Tous les styles peuvent être animés d'ajouter. Par exemple, l'image d'arrière-plan animé. Pas tous les styles d'animation va changer lorsque le film se termine.
Les extensions de plug-in de jQuery construits méthode .switchClass (). Si jQuery UI est pas chargé, appelez .switchClass()
méthode ne manque pas simplement, parce que la méthode existe dans jQuery. Mais il ne devrait pas le comportement.
Exemples
Ajoutez la classe "bleu" pour faire correspondre les éléments et enlever la classe "grand" des éléments appariés.
<! DOCTYPE html> <Html lang = "fr"> <Head> <Meta charset = "utf-8"> <Titre> .switchClass () Demo </ title> <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <Style> div { largeur: 100px; hauteur: 100px; background-color: #ccc; } .BIG { largeur: 200px; hauteur: 200px; } .blue { 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> <Class Div = "grand"> </ div> <Script> $ ( «Div») .cliquez (function () { $ (Ce) .switchClass ( "grand", "bleu", 1000, "easeInOutQuad"); }); </ Script> </ Body> </ Html>