Aulas
Disciplinas

Cursos / Informática para Internet / Desenvolvimento Web II / Aula

arrow_back Aula 08 - jQuery (Parte 2)

Métodos – Efeitos

Nesta seção, veremos como utilizar o jQuery para produzir efeitos visuais, por exemplo, fazer um elemento aparecer ou desaparecer, ficar parcialmente transparente etc. Veja na tabela a seguir o resumo dos principais métodos do jQuery usado para criar esses efeitos.

play_circle_filled
Vídeo 03 - Fade
Método Descrição
$(seletor).hide() Torna os elementos selecionados não visíveis.
$(seletor).show() Torna os elementos selecionados visíveis.
$(seletor).toggle() Alterna a visibilidade dos elementos selecionados: se estiverem visíveis ficarão não visíveis e se estiveram não visíveis ficarão visíveis.
$(seletor).slideUp() Diminui gradualmente a altura dos elementos selecionados até zero.
$(seletor).slideDown() Aumenta gradualmente a altura dos elementos selecionados até a  altura original.
$(seletor).slideToggle() Análogo ao 'toggle'; no entanto, alternando entre os efeitos gerados pelos métodos 'slideUp' e 'slideDown'.
$(seletor).fadeOut() Aumenta gradualmente a transparência dos elementos selecionados até eles desaparecerem.
$(seletor).fadeIn() Aumenta gradualmente a opacidade dos elementos selecionados até eles voltarem ao nível de opacidade original.
$(seletor).fadeTo() Define o grau de transparência dos elementos informados.
$(seletor).animate() Define uma sequência de animações a ser executada nos elementos selecionados.
Tabela 2 - Principais métodos do jQuery para se produzir efeitos visuais.

O código abaixo exemplifica o método ‘slideToggle’:

​x
1
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2
"http://www.w3.org/TR/html4/loose.dtd">
3
<html>
4
  <head>
5
  <title>Teste</title>
6
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.3.js"></script>
7
  </head>
8
9
  <body>
10
    <script type="text/javascript">
11
       $(document).ready(function() {
12
​
13
         $("#b1").click(function() {
14
           $("#logo").slideToggle();
15
         });
16
​
17
       });
18
    </script>
19
​
20
    <img id="logo" src="logo_imd.png" />
21
    <br>
22
    <input id="b1" type="button" value="Mostrar/Esconder Imagem">
23
​
24
  </body>
25
</html>
26
​

 

Notas

  1. Na linha 11, definimos as operações que serão realizadas após a página ser completamente carregada.
  2. Na linha 13, definimos o código a ser executado quando o botão cujo id é 'b1' for clicado.
  3. Na linha 14, através do método 'slideToggle' da API de AJAX do jQuery, geramos uma animação que esconde a logo do IMD se ela estiver exibida e mostra o logo do IMD se ele estiver escondido.
[A] Anterior
4/12
Próxima [D]

Sumário

Versão 5.3 - Todos os Direitos reservados