jQuery - efeitos

jQuery fornece uma interface trivialmente simples para fazer vários tipos de efeitos surpreendentes. Os métodos jQuery nos permitem aplicar rapidamente os efeitos comumente usados ​​com uma configuração mínima. Este tutorial cobre todos os métodos jQuery importantes para criar efeitos visuais.

Mostrando e ocultando elementos

Os comandos para mostrar e ocultar elementos são praticamente os que esperaríamos - show() para mostrar os elementos em um conjunto empacotado e hide() para escondê-los.

Sintaxe

Aqui está a sintaxe simples para show() método -

[selector].show( speed, [callback] );

Aqui está a descrição de todos os parâmetros -

  • speed - Uma string que representa uma das três velocidades predefinidas ("lenta", "normal" ou "rápida") ou o número de milissegundos para executar a animação (por exemplo, 1000).

  • callback- Este parâmetro opcional representa uma função a ser executada sempre que a animação for concluída; é executado uma vez para cada elemento animado.

A seguir está a sintaxe simples para hide() método -

[selector].hide( speed, [callback] );

Aqui está a descrição de todos os parâmetros -

  • speed - Uma string que representa uma das três velocidades predefinidas ("lenta", "normal" ou "rápida") ou o número de milissegundos para executar a animação (por exemplo, 1000).

  • callback- Este parâmetro opcional representa uma função a ser executada sempre que a animação for concluída; é executado uma vez para cada elemento animado.

Exemplo

Considere o seguinte arquivo HTML com uma pequena codificação JQuery -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {

            $("#show").click(function () {
               $(".mydiv").show( 1000 );
            });

            $("#hide").click(function () {
               $(".mydiv").hide( 1000 );
            });
				
         });
      </script>
		
      <style>
         .mydiv{ 
            margin:10px;
            padding:12px; 
            border:2px solid #666; 
            width:100px; 
            height:100px;
         }
      </style>
   </head>
	
   <body>
      <div class = "mydiv">
         This is a SQUARE
      </div>

      <input id = "hide" type = "button" value = "Hide" />   
      <input id = "show" type = "button" value = "Show" />
   </body>
</html>

Isso produzirá o seguinte resultado -

Alternando os Elementos

jQuery fornece métodos para alternar o estado de exibição de elementos entre revelado ou oculto. Se o elemento for exibido inicialmente, ele ficará oculto; se estiver oculto, será mostrado.

Sintaxe

Aqui está a sintaxe simples para um dos toggle() métodos -

[selector]..toggle([speed][, callback]);

Aqui está a descrição de todos os parâmetros -

  • speed - Uma string que representa uma das três velocidades predefinidas ("lenta", "normal" ou "rápida") ou o número de milissegundos para executar a animação (por exemplo, 1000).

  • callback- Este parâmetro opcional representa uma função a ser executada sempre que a animação for concluída; é executado uma vez para cada elemento animado.

Exemplo

Podemos animar qualquer elemento, como um <div> simples contendo uma imagem -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $(".clickme").click(function(event){
               $(".target").toggle('slow', function(){
                  $(".log").text('Transition Complete');
               });
            });
         });
      </script>
		
      <style>
         .clickme{ 
            margin:10px;
            padding:12px; 
            border:2px solid #666; 
            width:100px; 
            height:50px;
         }
      </style>
   </head>
	
   <body>
      <div class = "content">
         <div class = "clickme">Click Me</div>
         <div class = "target">
            <img src = "./images/jquery.jpg" alt = "jQuery" />
         </div>
         <div class = "log"></div>
      </div>
   </body>
</html>

Isso produzirá o seguinte resultado -

Métodos de efeito JQuery

Você viu o conceito básico de efeitos jQuery. A tabela a seguir lista todos os métodos importantes para criar diferentes tipos de efeitos -

Sr. Não. Métodos e Descrição
1 animar (parâmetros, [duração, atenuação, retorno de chamada])

Uma função para fazer animações personalizadas.
2 fadeIn (velocidade, [retorno de chamada])

Fade em todos os elementos correspondentes ajustando sua opacidade e disparando um retorno de chamada opcional após a conclusão.
3 fadeOut (velocidade, [retorno de chamada])

Esmaecer todos os elementos correspondentes ajustando sua opacidade para 0, definindo a exibição como "nenhum" e disparando um retorno de chamada opcional após a conclusão.
4 fadeTo (velocidade, opacidade, retorno de chamada)

Atenuar a opacidade de todos os elementos correspondentes para uma opacidade especificada e disparar um retorno de chamada opcional após a conclusão.
5 ocultar( )

Oculta cada um do conjunto de elementos correspondentes se eles forem mostrados.
6 ocultar (velocidade, [retorno de chamada])

Oculte todos os elementos correspondentes usando uma animação elegante e disparando um retorno de chamada opcional após a conclusão.
7 exposição( )

Exibe cada um do conjunto de elementos correspondentes, se estiverem ocultos.
8 mostrar (velocidade, [retorno de chamada])

Mostre todos os elementos correspondentes usando uma animação elegante e disparando um retorno de chamada opcional após a conclusão.
9 slideDown (velocidade, [callback])

Revele todos os elementos correspondentes ajustando sua altura e disparando um retorno de chamada opcional após a conclusão.
10 slideToggle (velocidade, [retorno de chamada])

Alterne a visibilidade de todos os elementos correspondentes ajustando sua altura e disparando um retorno de chamada opcional após a conclusão.
11 slideUp (velocidade, [callback])

Oculte todos os elementos correspondentes ajustando sua altura e disparando um retorno de chamada opcional após a conclusão.
12 parar ([clearQueue, gotoEnd])

Pára todas as animações em execução em todos os elementos especificados.
13 alternancia( )

Alterne a exibição de cada um dos conjuntos de elementos correspondentes.
14 alternar (velocidade, [retorno de chamada])

Alterne a exibição de cada um do conjunto de elementos correspondentes usando uma animação elegante e disparando um retorno de chamada opcional após a conclusão.
15 interruptor )

Alterne a exibição de cada um do conjunto de elementos correspondentes com base na opção (verdadeiro mostra todos os elementos, falso oculta todos os elementos).
16 jQuery.fx.off

Desative globalmente todas as animações.

Efeitos baseados em biblioteca de interface do usuário

Para usar esses efeitos, você pode fazer o download da Biblioteca de UI jQuery mais recente jquery-ui-1.11.4.custom.zipda jQuery UI Library ou use o Google CDN para usá-lo de maneira semelhante à que fizemos para jQuery.

Usamos o Google CDN para jQuery UI usando o seguinte snippet de código na página HTML para que possamos usar jQuery UI -

<head>
   <script src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js">
   </script>
</head>
Sr. Não. Métodos e Descrição
1 Cego

Cega o elemento ou o mostra ao cegá-lo.
2 Pulo

Salta o elemento vertical ou horizontalmente n vezes.
3 Grampo

Liga ou desliga o elemento, vertical ou horizontalmente.
4 Solta

Descarta o elemento ou mostra-o inserindo-o.
5 Explodir

Explode o elemento em várias partes.
6 Dobra

Dobra o elemento como um pedaço de papel.
7 Realçar

Destaca o fundo com uma cor definida.
8 Sopro

As animações de escala e desaparecimento criam o efeito de sopro.
9 Pulsar

Pulsiona a opacidade do elemento várias vezes.
10 Escala

Reduza ou aumente um elemento por um fator de porcentagem.
11 Mexe

Sacode o elemento vertical ou horizontalmente n vezes.
12 Tamanho

Redimensione um elemento para uma largura e altura especificadas.
13 Deslizar

Desliza o elemento para fora da janela de visualização.
14 Transferir

Transfere o contorno de um elemento para outro.