jQuery UI API - .toggleClass ()
categoría
efectos especiales (Efectos) | Efectos Core (Core Effects) | sobrecarga de métodos (método anula)
uso
Descripción: Cuando se cambia el estilo de animación, de acuerdo con la existencia de clase y el valor del parámetro del interruptor dentro del conjunto de elementos emparejados de cada elemento para añadir o eliminar una o más clases.
Devuelve: el jQuery
参数 | 类型 | 描述 | 默认值 |
---|---|---|---|
ClassName | String | 为匹配的元素集合中的每个元素要切换的一个或多个 class 名称,多个 class 名称用空格分隔 。 | |
switch | Boolean | 一个布尔值,指定 class 应被添加还是被移除。 | |
duration | Number 或 String | 一个字符串或一个数字,指定动画将运行多久。 | 400 |
easing | String | 一个字符串,指示要使用的 easing 函数。 | swing |
complete | Function() | 一旦动画完成时要调用的函数。 |
参数 | 类型 | 描述 |
---|---|---|
ClassName | String | 为匹配的元素集合中的每个元素要切换的一个或多个 class 名称,多个 class 名称用空格分隔 。 |
switch | Boolean | 一个布尔值,指定 class 应被添加还是被移除。 |
options | Object | 所有的动画设置。所有的属性是可选的。
|
Transición similar a la nativa CSS, clase de animación de jQuery UI proporciona una transición suave de un estado a otro estado de transición, al tiempo que garantiza que todos los detalles del cambio de estilo se hace a través de CSS sin necesidad de utilizar JavaScript. Todas las animaciones de clase, que comprende .toggleClass()
, permite que la duración de encargo de la animación y facilitar la función, la animación se ha completado también proporciona una devolución de llamada.
No todos los estilos pueden ser animados para agregar. Por ejemplo, la imagen de fondo animado. No cualquier estilo de animación cambiará cuando termina la película.
Las extensiones de plug-in de jQuery construyeron .toggleClass () método. Si jQuery UI no está cargado, llame .toggleClass()
método no se limita a fracasar, porque existe el método en jQuery. Pero no es el comportamiento esperado.
Ejemplos
Para coincidir con el cambio de clase de elemento de "gran azul".
<! DOCTYPE html> <Html lang = "es"> <Head> <Charset Meta = "UTF-8"> <Título> .toggleClass () Demo </ title> <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <Style> div { Anchura: 100px; altura: 100px; background-color: #ccc; } .big-azul { Anchura: 200px; altura: 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> <Cuerpo> <Div> </ div> <Script> $ ( "Div") .click (function () { $ (Este) .toggleClass ( "big-blue", 1000, "easeOutSine"); }); </ Script> </ Body> </ Html>