Como Empregar Transitions Class com jQuery UI Efeitos Especiais em CSS3

Usando classes CSS3 pode ter um efeito interessante na apresentação de tela de informações. jQuery UI faz com que seja possível a utilização de classes CSS para executar animações de quatro formas diferentes:

  • 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 apresentações lento o suficiente para que o usuário vê. (Você pode encontrar o código completo para este exemplo no Capítulo 06 pasta animações da código para download como ManageClasses.HTML).

$ (Function () {$ ( "# changeclass") click (function () {$ ( "# sampletext") addClass ( "Efeito", 1500, removeClass) -Retornar falsa -..}) - Função removeClass () { $ ( "# sampletext") removeClass ( "Efeito", 1500, "easeOutBounce") -.} -.. $ ( "# SwitchClass") click (function () {$ ( ". normal") switchClass ( "normal" "Effect", 1500, "easeInElastic".) - $ ( ". Effect") switchClass ( "Efeito", "Effect2", 1500, "easeOutElastic".) - $ ( ". Effect2") switchClass ( "Effect2" , "normal", 1500, "easeInOutElastic") - return false -}) -. ". normal". $ ( "# ToggleClass") click (function () {$ () 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 nesta função.

Todas estas animações funciona precisamente da mesma forma - se adicionar ou remover classes para ou a partir do elemento especificado. Neste caso, uma

chamado sampletext é o alvo das animações. A diferença entre as chamadas de método é a forma como eles executam sua tarefa.

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 () alterna 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ído por Effect, Efeito é substituído por Effect2 e Effect2 é substituído por Normal.

Consequentemente, você vê as animações girar entre três classes. Você fornece o nome da classe para remover como o primeiro argumento eo 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 animada. 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 desaparecer em.

Cada uma destas 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 funcionar o método.

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

Uma animação também pode usar um aliviando 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).

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 no 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.

Semelhante

menu