JqueryUI - Alternar classe

Este capítulo irá discutir o switchClass()método, que é uma nova classe útil para manipulação. O método switchClass () move de uma classe CSS de uma classe CSS para outra, animando a transição de um estado para o outro.

Sintaxe

Adicionado na versão 1.0 do jQueryUI

o switchClass() método tem sua sintaxe básica da seguinte maneira -

.switchClass( removeClassName, addClassName [, duration ] [, easing ] [, complete ] )
Sr. Não. Parâmetro e Descrição
1

removeClassName

Esta é uma String e representa o nome da classe CSS, ou lista delimitada por espaços de nomes de classes, a ser removida.

2

addClassName

É do tipo String e representa um ou mais nomes de classe (separados por espaço) a serem adicionados ao atributo de classe de cada elemento correspondido.

3

duration

É do tipo Number ou String e, opcionalmente, fornece lento, normal, rápido ou a duração do efeito em milissegundos. Se omitido, o método animate () determina o padrão. Seu valor padrão é 400 .

4

easing

O nome da função de atenuação a ser passada para o método animate ().

5

complete

Este é um método de retorno de chamada chamado para cada elemento quando o efeito é concluído para este elemento.

Adicionado na versão 1.9 do jQueryUI

Com a versão 1.9, este método agora suporta uma opção filho , que também anima os elementos descendentes.

.switchClass( removeClassName, addClassName [, options ] )
Sr. Não. Parâmetro e Descrição
1

removeClassName

Esta é uma String e representa o nome da classe CSS, ou lista delimitada por espaços de nomes de classes, a ser removida.

2

addClassName

É do tipo String e representa um ou mais nomes de classe (separados por espaço) a serem adicionados ao atributo de classe de cada elemento correspondido.

3

options

Isso representa todas as configurações de animação. Todas as propriedades são opcionais. Os valores possíveis são -

  • duration- Uma string ou número que determina por quanto tempo a animação será executada. Seu valor padrão é 400 .

  • easing- Uma string que indica qual função de atenuação usar para a transição. Seu valor padrão é swing . Os valores possíveis estão aqui .

  • complete - Este é um método de retorno de chamada chamado para cada elemento quando o efeito é concluído para este elemento.

  • children - Este é um booleano e representa se a animação deve ser aplicada adicionalmente a todos os descendentes dos elementos correspondentes.

  • queue - É do tipo String / Boolean que indica se a animação deve ser colocada na fila de efeitos.

Exemplos

O exemplo a seguir demonstra o uso do 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>

Vamos salvar o código acima em um arquivo HTML switchclassexample.htme abri-lo em um navegador padrão que suporte javascript, você também deve ver a seguinte saída. Agora, você pode brincar com o resultado -

Clique no botão Mudar de classe para ver o efeito das classes na caixa.