Como empregar transições de classe com jquery ui efeitos especiais em css3

Usando classes CSS3 pode ter um efeito interessante na apresentação de tela informações. jQuery UI torna possível usar classes CSS para executar animações de quatro maneiras diferentes:

Video: Como criar efeitos e animações com CSS e Jquery (parte 02) - WOW.js | CSS #03

• Adicionando uma classe

• A remoção de uma classe

• Alternar entre as classes

• Alternando uma classe

Em todos os quatro casos, o efeito não ocorre imediatamente - você fornecer um atraso de tempo para fazer a transição entre as apresentações lento o suficiente para que o usuário vê. (Você pode encontrar o código completo para este exemplo na pasta Capítulo 06Animations do código para download como ManageClasses.HTML.)

$ (Function () {$ ("#ChangeClass") .click (function () {$ ("#Texto de amostra") .addClass ("Efeito", 1500, removeClass) -Retornar falsa -}) - função removeClass () {$ ("#Texto de amostra") .removeClass ("Efeito", 1500, "easeOutBounce") -} - $ ("#SwitchClass") .click (function () {$ (".Normal") .switchClass ("Normal", "Efeito", 1500, "easeInElastic") - $ (".Efeito") .switchClass ("Efeito", "Effect2", 1500,"easeOutElastic") - $ (".Effect2") .switchClass ("Effect2", "Normal", 1500,"easeInOutElastic") -Retornar falsa -}) - $ ("#ToggleClass") .click (function () {$ (".Normal") .toggleClass ("Efeito", 1500) -Retornar falso-})})

Há três botões na parte da frente da página: Adicionar / Remover Class, alternar entre Classes, e alternar entre as classes. Cada um desses botões é atribuído um manipulador de eventos como mostrado. A função removeClass () é uma chamada de retorno para o botão Adicionar / Remover Classe. Após a transição para o manipulador de evento terminou, o código chama automaticamente esta função.

Todas estas animações funcionam exatamente da mesma maneira - eles adicionar ou remover as classes de ou para o elemento especificado. Neste caso, um

Video: MATERIAL DESIGN SLIDE TAB MENU (HTML5/CSS3/JQUERY)

O método addClass () realiza uma adição simples de uma classe. Você fornece o nome da classe para adicionar como o primeiro argumento. Se a classe já existe para o elemento, nada acontece. Da mesma forma, o método removeClass () remove a classe especificada a partir do elemento. Mais uma vez, você fornece o nome da classe para remover como o primeiro argumento.

O método switchClass () comuta entre uma classe e outra. Você pode usá-lo para criar várias transições. Por exemplo, este exemplo mostra como alternar entre três transições. A classe normal é substituída com efeito, efeito é substituído com Efeito2, e é substituído com Efeito2 normal.

Consequentemente, você vê as animações girar entre três classes. Você fornece o nome da classe para remover como o primeiro argumento e o nome da classe para adicionar como o segundo argumento.

O método toggleClass () adiciona ou remove uma classe dependendo se a classe é atribuído ao elemento. Neste caso, o código adiciona Efeito quando sampletext falta dele e remove Efeito quando sampletext tem aplicado. Você fornece o nome da classe para alternar como o primeiro argumento.

jQuery UI não pode animar todos os estilos. Por exemplo, há uma transição entre ter o texto justificado à esquerda e tê-lo centrado neste exemplo. Esta transição não pode ser animado. O que você vê é que o efeito ocorre no final da animação.

Além disso, alguns efeitos são animados, mas eles não são animados na forma como você poderia esperar. Por exemplo, se um elemento muda de cor, a nova cor é usada em toda a animação, mas você vê-lo gradualmente fade in.

Cada uma dessas chamadas de método inclui um intervalo de tempo de 1500 milissegundos. Este valor indica a quantidade de tempo em que ocorre a animação. A configuração padrão é 400 milissegundos, o que é um pouco difícil para a maioria das pessoas para ver. No entanto, este argumento é opcional, e você não tem que fornecê-lo para fazer o trabalho de método.

O método addClass () inclui um outro argumento opcional, uma função de chamada de retorno. A função de retorno de chamada é chamado quando a animação é longo. O exemplo utiliza a função de chamada de retorno para activar o efeito. No entanto, uma chamada de retorno poderia ser usado para qualquer um de uma série de efeitos. Por exemplo, você pode usá-lo para criar uma seqüência de validação para garantir que os usuários insiram os dados corretos para os campos de formulário que têm informações incorretas.

Uma animação também pode usar um facilitando função. Esta função determina como a animação aparece na tela. A configuração padrão é usar a função de oscilação flexibilização, o que proporciona uma transição suave do ponto de partida ao ponto final que a maioria dos usuários irão apreciar (a animação começa um pouco lento, se torna um pouco mais rápido e mais linear no meio, e em seguida, termina um pouco lento).

Video: Tutorial: Customizable Drop-down Menu Using jQuery, CSS, and HTML

No entanto, você pode querer um pouco mais pizzazz ou pelo menos um efeito diferente. Você pode ver uma lista de funções de atenuação em jQuery. Este exemplo usa um número de diferentes funções de atenuação para que você ter uma idéia de como eles funcionam.