Download - J query aula_02
![Page 1: J query aula_02](https://reader037.vdocuments.pub/reader037/viewer/2022100414/547ed060b4af9faa158b572f/html5/thumbnails/1.jpg)
![Page 2: J query aula_02](https://reader037.vdocuments.pub/reader037/viewer/2022100414/547ed060b4af9faa158b572f/html5/thumbnails/2.jpg)
EventosO evento pode ser forçado a acontecer:
$(‘#item’).trigger(‘click’);
![Page 3: J query aula_02](https://reader037.vdocuments.pub/reader037/viewer/2022100414/547ed060b4af9faa158b572f/html5/thumbnails/3.jpg)
EventosO 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.
![Page 4: J query aula_02](https://reader037.vdocuments.pub/reader037/viewer/2022100414/547ed060b4af9faa158b572f/html5/thumbnails/4.jpg)
EventosAplicando o evento hover:
$(‘#menu > li’).hover( function() { $(this).css('background-color', '#ccc'); }, function() { $(this).css('background-color', '#fff'); });
![Page 5: J query aula_02](https://reader037.vdocuments.pub/reader037/viewer/2022100414/547ed060b4af9faa158b572f/html5/thumbnails/5.jpg)
EventosNa 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.
![Page 6: J query aula_02](https://reader037.vdocuments.pub/reader037/viewer/2022100414/547ed060b4af9faa158b572f/html5/thumbnails/6.jpg)
Problema do hoverCom 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’.
![Page 7: J query aula_02](https://reader037.vdocuments.pub/reader037/viewer/2022100414/547ed060b4af9faa158b572f/html5/thumbnails/7.jpg)
Efeitos e AnimaçõesFormas básicas de animação:
$(‘#item’).show(‘slow’);$(‘#item’).hide(‘fast’);$(‘#item’).show(2000);$(‘#item’).toggle(‘medium’);
![Page 8: J query aula_02](https://reader037.vdocuments.pub/reader037/viewer/2022100414/547ed060b4af9faa158b572f/html5/thumbnails/8.jpg)
Efeitos e AnimaçõesUtilizamos slow, medium e fast para tempos padrões de animação.
Quanto utilizamos números para o tempo de animação, denimos ele em ms. Ou seja: 2000ms = 2 segundos.
O método ‘toggle’ verica alterna a visibilidade do elemento (alterna entre show e hide a partir de seu estado).
![Page 9: J query aula_02](https://reader037.vdocuments.pub/reader037/viewer/2022100414/547ed060b4af9faa158b572f/html5/thumbnails/9.jpg)
Efeitos e AnimaçõesMais formas básicas de animação:
$(‘#item’).slideUp();$(‘#item’).slideDown();$(‘#item’).fadeIn();$(‘#item’).fadeOut();
![Page 10: J query aula_02](https://reader037.vdocuments.pub/reader037/viewer/2022100414/547ed060b4af9faa158b572f/html5/thumbnails/10.jpg)
Efeitos e AnimaçõesEm slideUp() fazemos o elemento desaparecer com uma varredura vertical de baixo para cima.
![Page 11: J query aula_02](https://reader037.vdocuments.pub/reader037/viewer/2022100414/547ed060b4af9faa158b572f/html5/thumbnails/11.jpg)
Efeitos e AnimaçõesEm slideDown() fazemos o elemento aparecer com uma varredura vertical de cima para baixo.
![Page 12: J query aula_02](https://reader037.vdocuments.pub/reader037/viewer/2022100414/547ed060b4af9faa158b572f/html5/thumbnails/12.jpg)
Efeitos e AnimaçõesEm fadeIn() fazemos o elemento aparecer com um efeito de dissolução.
![Page 13: J query aula_02](https://reader037.vdocuments.pub/reader037/viewer/2022100414/547ed060b4af9faa158b572f/html5/thumbnails/13.jpg)
Efeitos e AnimaçõesEm fadeOut() fazemos o elemento desaparecer com um efeito de dissolução.
![Page 14: J query aula_02](https://reader037.vdocuments.pub/reader037/viewer/2022100414/547ed060b4af9faa158b572f/html5/thumbnails/14.jpg)
Efeitos e AnimaçõesAnimação avançada
$("#item").animate({ width: "70%", opacity: 0.4, marginLeft: "30px", fontSize: "30px", borderWidth: "10px"}, 1500 );
![Page 15: J query aula_02](https://reader037.vdocuments.pub/reader037/viewer/2022100414/547ed060b4af9faa158b572f/html5/thumbnails/15.jpg)
Efeitos e AnimaçõesNo método animate() passamos uma série de propriedades CSS que vamos alterar e em seguida o tempo de duração dessa duração.