01 – Aprendendo JQuery – Utilizando efeito Fading


Olá para todos.

Hoje vou deixar um post sobre JQuery que irá será ser o início de alguns outros no mesmo estilo e que serão baseados nas video aulas do JQuery Absolute Beginners.

fonte: https://mastigado.wordpress.com

Bem, vamos lá(bem mastigado).

1º – Vá na página do JQuery e baixe a última versão da biblioteca(http://jquery.com). Baixe a versão production;

2º – Crie uma pasta com o nome de exemplo01 e dentro dela mais duas pastas com os nomes de css e js;

3º – Dentro da pasta exemplo coloque o código html abaixo e o salve com o nome de index.html.

<html>
   <head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <title></title>
   </head>
   <body>
      <div id="quadrado"></div>
      <a href="#">Clique aqui!</a>
   </body>
</html>

4º – Agora, dentro da pasta css, crie um arquivo com o nome de estilos.css e acrescente o conteúdo abaixo.

   #quadrado {
   background: red;
   width:      300px;
   height:     300px;
}

Para que não conhece, criamos um arquivo de estilo do tipo CSS e referenciamos um elemento do html identificado pelo id chamado quadrado e neste estilo colocamos alguns parâmetros para que possamos gerar um quadrado.

5º – Para finalizar, acrescente um arquivo chamado funcoes.js dentro do diretório js que você criou e coloque o conteúdo abaixo dentro dele.

   $(function(){
      $('a').click(function(){
         $('#quadrado').fadeOut();
      });
   });

Isto é uma função chamada utilizando a biblioteca JQuery. Desta forma, escolhemos qual elemento do html fará a chamada para esta função utilizando $(‘a’).click(function(), onde ‘a’ é a tag a do html.

Já dentro do método, está o elemento que irá sofrer a execução da função, identificado por $(‘#quadrado’).fadeOut(), onde  quadrado precedido pelo símbolo #(#quadrado) significa que está sendo feita uma referência para um elemento da folha de estilos CSS(estilos.css).

E por último, o símbolo $ que identifica uma execução feita pela biblioteca do JQuery.

Lembrando, não esqueça de colocar a biblioteca do JQuery que você baixou para dentro da pasta js.
6º – Agora, para finalizarmos, inclua algumas chamadas para scripts dentro do primeiro arquivo index.html que editamos, salve-o e execute-o.

<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
      <script type="text/javascript" src="js/funcoes.js"></script>
      <link type="text/css" rel="stylesheet" href="css/estilos.css"></link>
      <title></title>
   </head>
   <body>
      <div id="quadrado"></div>
      <a href="#">Clique aqui!</a>
   </body>
</html>

Teste o efeito utilizando link Clique aqui! e depois altere o parâmetro da função do arquivo funcoes.js para você ver o que pode ser feito.

$('#quadrado').fadeOut(5000);

ou para:

$('#quadrado').fadeOut('fast');

ou então para:

$('#quadrado').fadeOut('slow');

Visite com certeza o link que fala sobre a função fadeOut e seus outros parâmetros http://api.jquery.com/fadeOut e o da API do JQuery http://api.jquery.com para ver mais funções.

fonte: https://mastigado.wordpress.com

Sobre Mastigado
Sou um daqueles que precisa mudar o mundo.

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: