jQuery UI API - .removeClass()

Categoría

Efectos (Effects) | Núcleo de efectos (Effects Core) | Sobrescrituras de métodos (Method Overrides)

Uso

Descripción:Cuando cambia el estilo de la animación, elimina la clase especificada de cada elemento del conjunto de elementos coincidentes.

Devuelve:jQuery

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

Parámetros Tipo Descripción Valor predeterminado
className String Uno o más nombres de clase para eliminar del atributo class de cada elemento coincidente, separados por espacios.
duration Number o String Una cadena o un número que especifica cuánto tiempo se ejecutará la animación. 400
easing String Una cadena que indica laeasingfunción. swing
complete Function() Una función que se llamará cuando la animación haya terminado.

.removeClass( className [, options ] )

Parámetros Tipo Descripción
className String Uno o más nombres de clase para eliminar del atributo class de cada elemento coincidente, separados por espacios.
options Object Todas las configuraciones de animación. Todas las propiedades son opcionales.
  • duration(Valor predeterminado:400）
    Tipo: Number o String
    Descripción: Una cadena o un número que especifica cuánto tiempo se ejecutará la animación.
  • easing(Valor predeterminado:swing）
    Tipo: String
    Descripción: Una cadena que indica laeasingfunción.
  • complete
    Tipo: Function()
    Descripción: Una función que se llamará cuando la animación haya terminado.
  • children(Valor predeterminado:false）
    Tipo: Boolean
    Descripción: Especifica si la animación se aplica a todos los descendientes de los elementos coincidentes. Esta función debe usarse con precaución, ya que determinar si un elemento es descendiente de los elementos animados es costoso y crece linealmente con el número de descendientes.
  • queue(Valor predeterminado:true）
    Tipo: Boolean o String
    Descripción: Un valor booleano que indica si se coloca la animación en la cola de efectos. Si es false, la animación comenzará inmediatamente.Desde jQuery 1.7, la opción queue también acepta una cadena, en cuyo caso la animación se agrega a la cola representada por la cadena.

Al igual que las transiciones CSS nativas, las animaciones de clase de jQuery UI proporcionan una transición suave de un estado a otro, al mismo tiempo que garantizan que todos los detalles de los cambios de estilo se realicen mediante CSS, sin necesidad de JavaScript. Todos los métodos de animación de clase, incluyendo.removeClass(), permiten personalizar la duración de la animación yeasingfunción, y también proporcionan una devolución de llamada cuando la animación se completa.

No todos los estilos se pueden animar. Por ejemplo, animar imágenes de fondo. Cualquier estilo que no se pueda animar cambiará al final de la animación.

Este plugin extiende el.removeClass()método integrado de jQuery. Si jQuery UI no está cargado, llamar.removeClass()al método no fallará directamente, porque el método existe en jQuery. Sin embargo, el comportamiento esperado no ocurrirá.

Ejemplos

Elimina la clase 'big-blue' de los elementos coincidentes.

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

Otras extensiones