Como trabalhar com flexibilização avançado 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 precisando 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 do aplicativo.

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 de inacessível. Usando um efeito especial para tornar isso mais perceptível poderia ser útil.

A biblioteca jQuery UI proporciona vários meios de controlo de elemento de visibilidade de uma 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 adicionado devido a uma escolha do usuário fez. Existem quatro métodos principais de animação elementos usando esta técnica:

• Usar um efeito em que o elemento muda visualmente.

• Mostrar um elemento oculto usando um efeito.

• Esconder um elemento por meio de 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 de explosão faz com que o elemento de quebrar em pedaços, com cada parte em movimento numa direcçã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

Video: Menu elegante com css e jQuery - Curso webdesign - Training Web

pulo

grampo

Video: Tutorial: Animação flip 3D apenas com HTML5 e CSS3 utilizando a propriedade PERSPECTIVE

solta

explodir

desvaneça

dobra

realçar

sopro

pulsar

escala

mexe

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 em jQuery.

O exemplo a seguir mostra como usar todas as 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ê a 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 na pasta Capítulo 06Animations do código para download como Visibility.HTML.

$ (Function () {// Mantenha o controle do state.var elemento Escondido Escondido = false - $ ("#Efeito") .click (function () {$ ("#Texto de amostra").efeito("pulo", "easeOutBounce", 1500) -}) - $ ("#Exposição") .click (function () {ocultos = falso - $ ("#Texto de amostra").exposição("deslizar", 1500, ChangeButtonState) -}) - $ ("#Ocultar") .click (function () {ocultos = true - $ ("#Texto de amostra").ocultar("explodir", 1500, ChangeButtonState) -}) - $ ("#Alternancia") .click (function () {oculto = escondida! - $ ("#Texto de amostra").alternancia("escala", {Por cento: 0}, 1500, ChangeButtonState) -}) - // Definir o estado do botão como ChangeButtonState needed.function () {if (Oculto) {$ ("#Exposição") .attr ("escondido", False) - $ ("#Ocultar") .attr ("escondido", True) -} else {$ ("#Exposição") .attr ("escondido", True) - $ ("#Ocultar") .attr ("escondido", False) -}}})

O exemplo que se começa com a criação de uma variável, escondida, para controlar o estado do elemento. Quando o elemento está oculto, o botão Show é exibido. Da mesma forma, quando o elemento é exibido, o botão Ocultar é exibido também. Esta funcionalidade é controlada por uma função de chamada de retorno, ChangeButtonState ().

Video: CSS Labs #1 - Efeito Hover FigCaption CSS

O código para o botão Effect 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 inalterada, mas o usuário vê uma animação do elemento na tela. Você poderia usar esta técnica para destacar campos que têm informações incorretas ou exigir 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 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 tratadores de eventos também fornecer 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 do show e botões Esconder - 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 para 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.