J query aula_02

958 views
909 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
958
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
13
Comments
0
Likes
1
Embeds 0
No embeds

No notes for 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.

×