2. Eventos
O evento pode ser forçado a acontecer:
$(‘#item’).trigger(‘click’);

3. 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.

4. Eventos
Aplicando o evento hover:
$(‘#menu > li’).hover(
function() {
$(this).css('background-color', '#ccc');
},
function() {
$(this).css('background-color', '#fff');
}
);

5. 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.

6. 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’.

7. Efeitos e Animações
Formas básicas de animação:
$(‘#item’).show(‘slow’);
$(‘#item’).hide(‘fast’);
$(‘#item’).show(2000);
$(‘#item’).toggle(‘medium’);

8. 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).

9. Efeitos e Animações
Mais formas básicas de animação:
$(‘#item’).slideUp();
$(‘#item’).slideDown();
$(‘#item’).fadeIn();
$(‘#item’).fadeOut();

10. Efeitos e Animações
Em slideUp() fazemos o elemento desaparecer com
uma varredura vertical de baixo para cima.

11. Efeitos e Animações
Em slideDown() fazemos o elemento aparecer com
uma varredura vertical de cima para baixo.

12. Efeitos e Animações
Em fadeIn() fazemos o elemento aparecer com um
efeito de dissolução.

13. Efeitos e Animações
Em fadeOut() fazemos o elemento desaparecer
com um efeito de dissolução.

14. Efeitos e Animações
Animação avançada
$("#item").animate({
width: "70%",
opacity: 0.4,
marginLeft: "30px",
fontSize: "30px",
borderWidth: "10px"
}, 1500 );

15. 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.