Latest web development tutorials

jQuery UI API - .switchClass ()

categoría

efectos especiales (Efectos) | Efectos Core (Core Effects) | sobrecarga de métodos (método anula)

uso

Descripción: Cuando los cambios en el estilo de animación dentro del conjunto de elementos coincidentes para añadir y eliminar todos los elementos de la clase especificada.

Devuelve: el jQuery

.switchClass( removeClassName, addClassName [, duration ] [, easing ] [, complete ] )

参数 类型 描述 默认值
removeClassName String 要从每个匹配的元素的 class 属性中移除的一个或多个 class 名称，多个 class 名称用空格分隔 。
addClassName String 要添加到每个匹配的元素的 class 属性中的一个或多个 class 名称，多个 class 名称用空格分隔。
duration Number 或 String 一个字符串或一个数字，指定动画将运行多久。 400
easing String 一个字符串，指示要使用的 easing 函数。 swing
complete Function() 一旦动画完成时要调用的函数。

.switchClass( removeClassName, addClassName [, options ] )

参数 类型 描述
removeClassName String 要从每个匹配的元素的 class 属性中移除的一个或多个 class 名称，多个 class 名称用空格分隔 。
addClassName String 要添加到每个匹配的元素的 class 属性中的一个或多个 class 名称，多个 class 名称用空格分隔。
options Object 所有的动画设置。所有的属性是可选的。
  • duration （默认值： 400 ）
    类型：Number 或 String
    描述：一个字符串或一个数字，指定动画将运行多久。
  • easing （默认值： swing ）
    类型：String
    描述：一个字符串，指示要使用的 easing 函数。
  • complete
    类型：Function()
    描述：一旦动画完成时要调用的函数。
  • children （默认值： false ）
    类型：Boolean
    描述：指定动画是否被应用到匹配元素的所有后代。此功能应慎重使用，因为判断元素是否是动画的后代的代价是很大的，会根据后代的数量线性增长。
  • queue （默认值： true ）
    类型：Boolean 或 String
    描述：一个布尔值，指示是否将动画放在特效队列中。如果是 false，动画将立即开始。 自 jQuery 1.7 起 ，queue 选项也接受一个字符串，在这种情况下，动画添加到由字符串表示的队列中。

.switchClass() método que permite transiciones animadas, agregar la clase mientras se quita la clase.

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 .switchClass() , 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 método .switchClass (). Si jQuery UI no está cargado, llame .switchClass() método no se limita a fracasar, porque existe el método en jQuery. Pero no es el comportamiento esperado.

Ejemplos

Agregue la clase "azul" para que coincida con los elementos y retire la clase "grande" de los elementos coincidentes. 

<! DOCTYPE html>
<Html lang = "es">
<Head>
  <Charset Meta = "UTF-8">
  <Título> .switchClass () 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 {
    Anchura: 200px;
    altura: 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>
<Cuerpo>
 
<Div class = "grande"> </ div>
 
<Script>
$ ( "Div") .click (function () {
  $ (Este) .switchClass ( "grande", "azul", 1000, "easeInOutQuad");
});
</ Script>
 
</ Body>
</ Html>