JqueryUI - Rimuovi classe

Questo capitolo discuterà di removeClass()metodo, che è uno dei metodi utilizzati per gestire gli effetti visivi di jQueryUI. Il metodo removeClass () rimuove le classi applicate dagli elementi.

Il metodo removeClass () rimuove le classi specificate dagli elementi corrispondenti mentre anima tutte le modifiche di stile.

Sintassi

Aggiunto nella versione 1.0 di jQueryUI

Il removeClass() metodo ha la sua sintassi di base come segue:

.removeClass( className [, duration ] [, easing ] [, complete ] )
Sr.No. Parametro e descrizione
1

className

Questa è una stringa contenente una o più classi CSS (separate da spazi) da rimuovere.
2

duration

È di tipo Numero o Stringa e indica il numero di millisecondi dell'effetto. Un valore pari a 0 prende l'elemento direttamente nel nuovo stile, senza progresso. Il suo valore predefinito è 400 .
3

easing

Questo è di tipo String e indica il modo in cui progredire nell'effetto. Il suo valore predefinito è swing . I valori possibili sono qui .
4

complete

Questo è un metodo di callback chiamato per ogni elemento quando l'effetto è completo per questo elemento.

Aggiunto nella versione 1.9 di jQueryUI

Con la versione 1.9, questo metodo ora supporta un'opzione figli , che animerà anche gli elementi discendenti.

.removeClass( className [, options ] )
Sr.No. Parametro e descrizione
1

className

Questa è una stringa contenente una o più classi CSS (separate da spazi).
2

options

Questo rappresenta tutte le impostazioni di animazione. Tutte le proprietà sono opzionali. I valori possibili sono -

  • duration- È di tipo Numero o Stringa e indica il numero di millisecondi dell'effetto. Un valore pari a 0 prende l'elemento direttamente nel nuovo stile, senza progresso. Il suo valore predefinito è 400 .

  • easing- Questo è di tipo String e indica il modo in cui progredire nell'effetto. Il suo valore predefinito è swing . I valori possibili sono qui .

  • complete - Questo è un metodo di callback chiamato per ogni elemento quando l'effetto è completo per questo elemento.

  • children- È di tipo booleano e indica se l'animazione deve essere applicata in aggiunta a tutti i discendenti degli elementi corrispondenti. Il suo valore predefinito è false .

  • queue- È di tipo Boolean o String e rappresenta se posizionare l'animazione nella coda degli effetti. Il suo valore predefinito è vero .

Esempi

L'esempio seguente mostra l'uso dei metodi removeClass () .

Passaggio in classe singola

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

Salviamo il codice sopra in un file HTML removeclassexample.htme aprilo in un browser standard che supporta javascript, devi anche vedere il seguente output. Ora puoi giocare con il risultato:

Fare clic sui pulsanti Aggiungi classe e Rimuovi classe per vedere l'effetto delle classi sulla scatola.