Como trabalhar com o Advanced Facilitando em jQuery UI Efeitos Especiais em CSS3

Muitas aplicações requerem que você mostrar ou ocultar elementos CSS3 em diferentes pontos de execução do aplicativo. Pode ser algo tão simples como não necessitando o elemento naquele momento em particular (como uma barra de progresso). Na maioria dos casos, você simplesmente quer o elemento para ir embora. Se o usuário percebe o desaparecimento é irrelevante para a funcionalidade da aplicação.

No entanto, você pode querer que o usuário notar a mudança em algumas situações. Por exemplo, um usuário pode selecionar uma opção que faz com que outras opções inacessível. Usando um efeito especial para tornar isso mais perceptível poderia ser útil.

A biblioteca jQuery UI fornece vários meios de controlar elemento de visibilidade de forma animada. O fato de que o elemento é mostrado ou oculto não muda, mas a maneira em que o pedido mostra ou esconde o que faz.

Por exemplo, você poderia usar um efeito de slides para mostrar que um novo elemento foi acrescentado devido a uma escolha do usuário fez. Existem quatro principais métodos de animar elementos usando esta técnica:

  • Use um efeito onde o elemento muda visualmente.

  • Mostrar um elemento escondido usando um efeito.

  • Esconder um elemento usando um efeito.

  • Alternar a visibilidade de um elemento usando um efeito.

O efeito que você escolher para trabalhar com um elemento controla como jQuery UI visualmente o administra. Por exemplo, um efeito explodir faz com que o elemento para quebrar em pedaços, com cada peça movendo em uma direção para fora da tela diferente. As seguintes palavras-chave definem os tipos de efeitos que você pode usar (você pode encontrar detalhes adicionais no jQuery):

cego
ressalto
grampo
solta
explodir
desvaneça
dobra
realçar
sopro
pulsar
escala
agitar
tamanho
deslizar
transferir

Além do efeito real, você pode usar uma função de atenuação para tornar o efeito mais pronunciado ou especial de outras maneiras. Você pode ver uma lista de funções de atenuação no jQuery.

O exemplo a seguir mostra como usar todos os quatro abordagens para trabalhar com elemento de visibilidade. Na verdade, existem quatro botões usados ​​para o exemplo, mas limites elemento de visibilidade que você para ver apenas três de cada vez, porque você não pode mostrar um elemento que já está visível ou ocultar um elemento que já está escondido.

Você pode encontrar o código completo para este exemplo no Capítulo 06 pasta animações da código para download como Visibility.HTML.

$ (Function () {// Mantenha o controle do elemento state.var escondida escondida = false -.. $ ( "# Effect") click (function () {$ ( "# sampletext") efeito ( "rejeição", " easeOutBounce ", 1500) -}) - $ (" # Show ") click (function () {oculto = false -. $ (" # sampletext ") show (." slides ", 1500, ChangeButtonState) -}) - $ ( "#Hide") click (function () {oculto = true - $ ( "# sampletext") esconder ( "explodir", 1500, ChangeButtonState) -.}) -.. ( "# Toggle") click (function $ () {oculto = Oculto - $ ( "# sampletext") alternar ( "escala", {por cento: 0}, 1500, ChangeButtonState) -.}) - // Definir o estado de botão como needed.function ChangeButtonState () { if (oculto) {$ ( "# Show") attr ( "escondido", false) -.. $ ( "# Hide") attr ( "escondido", true) -} else {$ ( "# Show"). attr ( "escondido", true) - $ ( "# Hide") attr ( "escondido", false) -.}}})

O exemplo começa com a criação de uma variável, escondido, para controlar o estado do elemento. Quando o elemento está escondido, o botão Show é exibido. Do mesmo modo, quando o elemento é exibido, o botão é apresentado Esconder bem. Esta funcionalidade é controlada por uma função de chamada de retorno, ChangeButtonState ().

O código para o botão Efeito simplesmente executa um efeito sobre o elemento, sampletext. Neste caso, você vê o efeito de rejeição. O desempenho deste efeito é modificado pela easeOutBounce função de atenuação, e toda a animação dura 1500 milissegundos.

A visibilidade real mantém-se inalterado, mas o usuário vê uma animação do elemento na tela. Você pode usar esta técnica para destacar campos que têm informações incorretas ou solicitar informações adicionais. Claro, você também pode usá-lo para realizar qualquer outro tipo de animação simples desejado - incluindo uma animação em loop, onde a animação é constantemente repetido.

A mostrar e ocultar botão de código de trabalho mão-na-mão para ocultar ou exibir sampletext. O botão Mostrar usa o efeito de slide, e no botão Ocultar usa o efeito explodir. Ambos executar a tarefa mais de 1500 milissegundos.

Observe que ambos os manipuladores de eventos definir o estado de Hidden diretamente porque o Estado é um absoluto acordo com a tarefa que o botão executa. Os manipuladores de eventos também fornecem ChangeButtonState () como uma função de retorno. A animação chama essa função após a animação foi concluída para definir o estado do botão corretamente.

O botão Alternar funciona como uma combinação dos botões Show e Hide - o manipulador de eventos simplesmente alterna o estado visual sampletext. Porque o estado não é conhecido, o valor de Hidden também é alternado. Neste caso, o manipulador de eventos chama o efeito de escala, o que requer um argumento adicional na forma de por cento.

Certifique-se de verificar os efeitos de determinar se eles exigem argumentos adicionais - a maioria não. Quando a animação for concluída, o aplicativo chama ChangeButtonState () para reconfigurar a interface de usuário, conforme necessário.

Semelhante

menu