JQUERY Movimento e Animação Simples

Caros...
... nesta aula veremos como algumas funções podem colaborar com os movimentos e animações baseadas nas estruturas do CSS. Primeiramente veremos uma estrutura simples com HTML e CSS para a inclusão do JQUERY em uma imagem e um texto no corpo da página.

Primeiramente crie uma pasta e dentro dela, insira o código HTML feito no Editor de sua preferência, e a Imagem tbm de sua preferência. Algo como o exposto abaixo...




Agora vamos observar o documento HTML.
Veja o código...


agora vamos entender o código utilizado...

<html>
- aqui temos a tag que indica a criação do documento HTML

<head>
- aqui temos a tag que indica que o cabeçalho do documento inicia

<meta charset="utf-8">
- aqui temos a tag meta para indicar a formatação dos caracteres

<title>
- aqui temos a tag que indica o título do documento

<style>
- aqui temos a definição do objeto "#etec" dentro da estrutura CSS onde temos a definição da borda e da cor ( border: 2px solid black; ) e a largura (width: 400px;)

<body>
- aqui temos a tag que indica o inicio do corpo da página ( documento ).

<img>
- aqui temos a tag que indica o inserir de uma imagem, onde, devemos indicar o endereço onde a imagem está (src="etecsm_wallpaper.jpg") e sua identificação (id="etec" ).

<h1>
- aqui temos a tag que indica um título na página do documento com a identificação "texto". (<h1 id="texto">ETEC Sao Mateus</h1>)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
- aqui temos a tag para indicar o inserir da biblioteca de Javascript - jquery diretamente do site da google. Assim não precisamos baixar a biblioteca para utilizá-la.

<script>
 - aqui temos a tag com o cádigo javascript - jquery para dar movimento aos objetos do documento, veja as linhas abaixo para entender cada uma delas;  

$("#etec").hide();
- aqui inserimos o código para esconder o objeto etec ( que é a nossa imagem);
        
$("#texto").hide();
- aqui temos o código para esconder o objeto texto ( que estava no h1 no corpo da página do documento.
        
$("#etec").slideDown(1000, function() {   
$("#texto").fadeIn(3000);
  });
- aqui temos o código para fazer o objeto etec aparecer em slideDown com o tempo em aprox. 1000 milisegundos e também temos uma função que fará aparecer lentamente o objeto texto.

Simples né! Agora salve o código com extensão html e abra no navegador.

Um complemento que temos em Jquery é a "animate", que possibilita animações simples e sofisticadas. animate possui vários atributos e podem ser utilizados vários deles em um documento com javascript e CSS. Veja abaixo uma animação simples.


OK. salve o documento como html e abra no navegador.
O que o código faz e alterar propriedades CSS da página do documento. Neste caso altera a margem da figura em relação a página do documento e muda tambpem o tamanho da imagem.

O trabalho acabado fica parecido com isso:

ok.

Vamos entender que ANIMATE possui 4 parâmetros. Veja

Parâmetros do método animate()

Para invocar o método animate() temos que indicar uma série de parâmetros, embora só um deles será obrigatório. A listagem é a seguinte:

.animate( Propriedades, [ Duração], [ Função de animação ], [ Callback ] )


Propriedades: Este é o único parâmetro que deve ser indicado obrigatoriamente e é para indicar que atributos CSS queremos atualizar, com seus novos valores. Deve ser indicado em notação de objeto, de maneira similar a o método css() de jQuery e só permite a mudança de propriedades CSS que tenham valores numéricos. Por exemplo, poderíamos mudar a largura de uma borda, mas não o tipo de borda (se queremos que seja sólido, com linha de pontos, etc.) porque não tem valores numéricos. Geralmente, se não especificamos outra coisa os valores se entendem em pixels. Os novos valores podem ser indicados de maneira absoluta, ou inclusive de maneira relativa, com um string do tipo "+=50", que indica que esse atributo deve ser aumentado em 50. 

Duração: Serve para indicar a duração da animação, em um valor numérico em milissegundos, ou em um valor de cadeia de caracteres como "fast" ou "slow".

Função de animação: Esta função serve para indicar como se realizará a animação, se mais suave no principio e rápida no final, ou igual de rápida todo o tempo. Ou seja, a velocidade com a que se realizará a mudança de valores em diferentes pontos de dentro da animação. Em princípio, os dois possíveis valores são "swing" (por padrão) e "linear".

Callback: Oferece a possibilidade de indicar uma função a ser executada quando o efeito terminou totalmente de se produzir. Ou seja, uma função que é invocada quando se chegou ao valor final dos atributos CSS que se solicitaram mudar.


Lembrando que apenas uma é obrigatória - a propriedade que utilizamos de CSS. as demais são complementos para colaborar na animação.

é isso!
Pronto! Pronto!

Nenhum comentário: