Eventos
O evento pode ser forçado a acontecer:

$(‘#item’).trigger(‘click’);
Eventos
O evento hover

Diferente dos eventos ‘focus’ e ‘blur’, o ‘hover’ ocorre em 2
momentos diferentes:

1- quando o po...
Eventos
Aplicando o evento hover:

$(‘#menu > li’).hover(
  function() {
    $(this).css('background-color', '#ccc');
  },...
Eventos
Na primeira função temos o funcionamento do
primeiro evento, ou seja, mouse se posiciona acima
de um elemento ( ‘#...
Problema do hover
Com a crescente demanda de aparelhos com
tecnologias de touch screen, o evento hover começa
a deixar de ...
Efeitos e Animações
Formas básicas de animação:

$(‘#item’).show(‘slow’);
$(‘#item’).hide(‘fast’);
$(‘#item’).show(2000);
...
Efeitos e Animações
Utilizamos slow, medium e fast para tempos padrões
de animação.

Quanto utilizamos números para o temp...
Efeitos e Animações
Mais formas básicas de animação:

$(‘#item’).slideUp();
$(‘#item’).slideDown();
$(‘#item’).fadeIn();
$...
Efeitos e Animações
Em slideUp() fazemos o elemento desaparecer com
uma varredura vertical de baixo para cima.
Efeitos e Animações
Em slideDown() fazemos o elemento aparecer com
uma varredura vertical de cima para baixo.
Efeitos e Animações
Em fadeIn() fazemos o elemento aparecer com um
efeito de dissolução.
Efeitos e Animações
Em fadeOut() fazemos o elemento desaparecer
com um efeito de dissolução.
Efeitos e Animações
Animação avançada

$("#item").animate({
  width: "70%",
  opacity: 0.4,
  marginLeft: "30px",
  fontSi...
Efeitos e Animações
No método animate() passamos uma série de
propriedades CSS que vamos alterar e em seguida
o tempo de d...
J query aula_02
Próximos SlideShares
Carregando em…5
×

J query aula_02

984 visualizações

Publicada em

0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
984
No SlideShare
0
A partir de incorporações
0
Número de incorporações
6
Ações
Compartilhamentos
0
Downloads
13
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

J query aula_02

  1. 1. Eventos O evento pode ser forçado a acontecer: $(‘#item’).trigger(‘click’);
  2. 2. Eventos O evento hover Diferente dos eventos ‘focus’ e ‘blur’, o ‘hover’ ocorre em 2 momentos diferentes: 1- quando o ponteiro do mouse se posiciona acima do elemento 2- quando o ponteiro do mouse deixa de se posicionar acima do elemento. Logo, temos uma forma especial de tratar esse tipo de evento, enviando 2 conjuntos de métodos: um para quando o mouse estiver acima e outro quando sair do elemento marcado.
  3. 3. Eventos Aplicando o evento hover: $(‘#menu > li’).hover( function() { $(this).css('background-color', '#ccc'); }, function() { $(this).css('background-color', '#fff'); } );
  4. 4. Eventos Na primeira função temos o funcionamento do primeiro evento, ou seja, mouse se posiciona acima de um elemento ( ‘#menu > li’ ). A segunda função se aplica quando o mouse deixa de apontar esse elemento.
  5. 5. Problema do hover Com a crescente demanda de aparelhos com tecnologias de touch screen, o evento hover começa a deixar de acontecer em alguns casos. Por exemplo: uma tela de celular baseada em toque não gera um evento ‘hover’, pois a indicação com dedo ou caneta indicaria um evento ‘click’.
  6. 6. Efeitos e Animações Formas básicas de animação: $(‘#item’).show(‘slow’); $(‘#item’).hide(‘fast’); $(‘#item’).show(2000); $(‘#item’).toggle(‘medium’);
  7. 7. Efeitos e Animações Utilizamos slow, medium e fast para tempos padrões de animação. Quanto utilizamos números para o tempo de animação, denimos ele em ms. Ou seja: 2000ms = 2 segundos. O método ‘toggle’ verica alterna a visibilidade do elemento (alterna entre show e hide a partir de seu estado).
  8. 8. Efeitos e Animações Mais formas básicas de animação: $(‘#item’).slideUp(); $(‘#item’).slideDown(); $(‘#item’).fadeIn(); $(‘#item’).fadeOut();
  9. 9. Efeitos e Animações Em slideUp() fazemos o elemento desaparecer com uma varredura vertical de baixo para cima.
  10. 10. Efeitos e Animações Em slideDown() fazemos o elemento aparecer com uma varredura vertical de cima para baixo.
  11. 11. Efeitos e Animações Em fadeIn() fazemos o elemento aparecer com um efeito de dissolução.
  12. 12. Efeitos e Animações Em fadeOut() fazemos o elemento desaparecer com um efeito de dissolução.
  13. 13. Efeitos e Animações Animação avançada $("#item").animate({ width: "70%", opacity: 0.4, marginLeft: "30px", fontSize: "30px", borderWidth: "10px" }, 1500 );
  14. 14. Efeitos e Animações No método animate() passamos uma série de propriedades CSS que vamos alterar e em seguida o tempo de duração dessa duração.

×