JqueryUI - Eliminar clase

Este capítulo discutirá el removeClass()método, que es uno de los métodos utilizados para gestionar los efectos visuales de jQueryUI. El método removeClass () elimina las clases aplicadas de los elementos.

El método removeClass () elimina las clases especificadas de los elementos coincidentes mientras anima todos los cambios de estilo.

Sintaxis

Agregado en la versión 1.0 de jQueryUI

los removeClass() El método tiene su sintaxis básica de la siguiente manera:

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

No Señor.	Descripción de parámetros
1	className Se trata de una cadena que contiene una o más clases CSS (separadas por espacios) que se eliminarán.
2	duration Es de tipo Number o String, e indica el número de milisegundos del efecto. Un valor de 0 toma el elemento directamente en el nuevo estilo, sin progreso. Su valor predeterminado es 400 .
3	easing Es de tipo String e indica la forma de progresar en el efecto. Su valor predeterminado es swing . Los posibles valores están aquí .
4	complete Este es un método de devolución de llamada llamado para cada elemento cuando el efecto está completo para este elemento.

Agregado en la versión 1.9 de jQueryUI

Con la versión 1.9, este método es ahora compatible con un hijos opción, que también incluirá elementos animados descendientes.

.removeClass( className [, options ] )

No Señor.	Descripción de parámetros
1	className Esta es una cadena que contiene una o más clases CSS (separadas por espacios).
2	options Esto representa todas las configuraciones de animación. Todas las propiedades son opcionales. Los valores posibles son: duration- Es de tipo Number o String, e indica el número de milisegundos del efecto. Un valor de 0 toma el elemento directamente en el nuevo estilo, sin progreso. Su valor predeterminado es 400 . easing- Es de tipo String e indica el camino a seguir en el efecto. Su valor predeterminado es swing . Los posibles valores están aquí . complete - Este es un método de devolución de llamada llamado para cada elemento cuando el efecto está completo para este elemento. children- Es de tipo booleano y representa si la animación debe aplicarse adicionalmente a todos los descendientes de los elementos coincidentes. Su valor predeterminado es falso . queue- Es de tipo Boolean o String y representa si colocar la animación en la cola de efectos. Su valor predeterminado es verdadero .

Ejemplos

El siguiente ejemplo demuestra el uso de métodos removeClass () .

Pasando una sola clase

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI removeClass Example</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         .elemClass {
            width: 200px;
            height: 50px;
            background-color: #b9cd6d;
         }
         .myClass {
            font-size: 40px; background-color: #ccc; color: white;
         }
      </style>
      
      <script type = "text/javascript">
         $(document).ready(function() {
            $('.button').click(function() {
               if (this.id == "add") {
                  $('#animTarget').addClass("myClass", "fast")
               } else {
               $('#animTarget').removeClass("myClass", "fast")
               }
            })
         });
      </script>
   </head>
   
   <body>
      <div id = animTarget class = "elemClass">
         Hello!
      </div>
      
      <button class = "button" id = "add">Add Class</button>
      <button class = "button" id = "remove">Remove Class</button>
   </body>
</html>

Guardemos el código anterior en un archivo HTML. removeclassexample.htmy abrirlo en un navegador estándar que admita javascript, también debe ver el siguiente resultado. Ahora puedes jugar con el resultado:

Haga clic en los botones Agregar clase y Eliminar clase para ver el efecto de las clases en el cuadro.

↰ Previous page Next page ↱