JqueryUI - Clase de conmutador

Este capítulo discutirá el switchClass()método, que es una nueva clase útil para la manipulación. El método switchClass () se mueve de un CSS de una clase de CSS a otra, animando la transición de un estado a otro.

Sintaxis

Agregado en la versión 1.0 de jQueryUI

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

.switchClass( removeClassName, addClassName [, duration ] [, easing ] [, complete ] )
No Señor. Descripción de parámetros
1

removeClassName

Se trata de una cadena y representa el nombre de la clase CSS, o la lista de nombres de clases delimitada por espacios, que se eliminará.
2

addClassName

Es de tipo String y representa uno o más nombres de clase (separados por espacios) que se agregarán al atributo de clase de cada elemento coincidente.
3

duration

Este es de tipo Number o String y opcionalmente proporciona uno de lento, normal, rápido o la duración del efecto en milisegundos. Si se omite, el método animate () determina el valor predeterminado. Su valor predeterminado es 400 .
4

easing

El nombre de la función de aceleración que se pasará al método animate ().
5

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.

.switchClass( removeClassName, addClassName [, options ] )
No Señor. Descripción de parámetros
1

removeClassName

Se trata de una cadena y representa el nombre de la clase CSS, o la lista de nombres de clases delimitada por espacios, que se eliminará.
2

addClassName

Es de tipo String y representa uno o más nombres de clase (separados por espacios) que se agregarán al atributo de clase de cada elemento coincidente.
3

options

Esto representa todas las configuraciones de animación. Todas las propiedades son opcionales. Los valores posibles son:

  • duration- Una cadena o número que determina cuánto tiempo se ejecutará la animación. Su valor predeterminado es 400 .

  • easing- Una cadena que indica qué función de aceleración utilizar para la transición. 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 - Este es un booleano y representa si la animación debe aplicarse adicionalmente a todos los descendientes de los elementos emparejados.

  • queue - Es de tipo String / Boolean que indica si colocar la animación en la cola de efectos.

Ejemplos

El siguiente ejemplo demuestra el uso del método switchClass () .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Switch Class 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>
      
      <!-- CSS -->
      <style>
         .LargeClass {
            font-family: Arial;
            font-size: large;
            font-weight: bold;
            color: Red;
         }
         .NormalClass {
            font-family: Arial;
            font-size: small;
            font-weight: bold;
            color: Blue;
         }
      </style>
      
      <script>
         $(function() {
            $('#btnSwitch').click(function() {
               $(".NormalClass").switchClass("NormalClass","LargeClass",'fast');
               $(".LargeClass").switchClass("LargeClass","NormalClass",'fast');
               return false;
            });
         });
      </script>
   </head>
   
   <body>
      <div class = "NormalClass">
         Tutorials Point Rocks!!!
      </div>
      <div class = "NormalClass">
         Welcome to Tutorials Point!!!
      </div>
      <br />
      <input type = "button" id = "btnSwitch" value = "Switch Class" />
   </body>
</html>

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

Haga clic en el botón Cambiar clase para ver el efecto de las clases en el cuadro.