main

.switchClass() da jQuery user interface

.switchClass() da jQuery user interface, categorias: Effects, Effectes Core

Trabalhando com switchClass tem a funcionalidade de adicionar e remover classes especificas de um conjunto de elementos do HTML enquanto anima os estilos (as classes) trocados.

Aplicação: .switchClass(removeClassName, addClassName, duration, easing, complete)


- removeClassName
Type: String
Uma ou mais classes serão removidas a partir da identificação da classe em cada elemento HTML correspondente.

- addClassName
Type: String
Uma ou mais classes serão adicionadas a partir da identificação da classe em cada elemento HTML correspondente.

- duration (default: 400)
Type: Number or String
A string ou number determina quanto tempo a animação será executada.

- easing (default: swing)
Type: String
A string incada qual função será usada para transição.

- complete
Type: Function()
Você pode utilizar o complete para adicionar uma função ao término da animação.

O .switchClass() permite realizar transições adicionando e removendo classes.

Semelhante às transições nativas do CSS, animações com jQuery UI proporcionam uma transição suave de um estado para outro, permitindo-lhe manter todos os detalhes e alterar o CSS com as trocas de estilo (classes).

Todos os métodos de animação de classe, inclusive .switchClass(), suportam a customização de tempo, tipo de transição e retorno de função quando a animação estiver completa.

Para correto funcionamento é necessário a utilização da biblioteca jQuery UI

Os tipos de transições e exemplos:


                        
                        

                              
                        
  
                        

                        
                        .box-anima-ball {
                            position: relative;
                            padding: 8px;
                            width: 97%;
                            height: 20px;
                            border: 2px solid #E5E5E5;
                            margin-bottom: 8px;
                            background: #F1F1F1;
                        }

                        .anima-ball {
                            position: absolute;
                            padding: 5px;
                            width: 10px;
                            height: 10px;   
                            background: red;
                            border-radius: 50%;
                            -webkit-border-radius: 50%;
                        }

                        .ani-off {
                            left: 5px;
                        }

                        .ani-on {
                            left: 735px;
                        }
Primeiro: transição easeOutQuart

Segundo: transição easeInOutQuint 

                        $('#id' + element_id).switchClass('ani-on','ani-off',3000,easeInOutQuint);

Terceiro: transição easeInElastic 

                        $('#id' + element_id).switchClass('ani-on','ani-off',3000,easeInElastic);

Quarta: transição easeOutElastic 

                        $('#id' + element_id).switchClass('ani-on','ani-off',3000,easeOutElastic);

Veja todos os efeitos no site da jQuery user interface, easings




Veja também: