J query aula_02
Click here to load reader
-
Upload
suissa-corp -
Category
Documents
-
view
1.199 -
download
0
description
Transcript of J query aula_02
EventosO evento pode ser forçado a acontecer:
$(‘#item’).trigger(‘click’);
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.
EventosAplicando o evento hover:
$(‘#menu > li’).hover( function() { $(this).css('background-color', '#ccc'); }, function() { $(this).css('background-color', '#fff'); });
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.
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’.
Efeitos e AnimaçõesFormas básicas de animação:
$(‘#item’).show(‘slow’);$(‘#item’).hide(‘fast’);$(‘#item’).show(2000);$(‘#item’).toggle(‘medium’);
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).
Efeitos e AnimaçõesMais formas básicas de animação:
$(‘#item’).slideUp();$(‘#item’).slideDown();$(‘#item’).fadeIn();$(‘#item’).fadeOut();
Efeitos e AnimaçõesEm slideUp() fazemos o elemento desaparecer com uma varredura vertical de baixo para cima.
Efeitos e AnimaçõesEm slideDown() fazemos o elemento aparecer com uma varredura vertical de cima para baixo.
Efeitos e AnimaçõesEm fadeIn() fazemos o elemento aparecer com um efeito de dissolução.
Efeitos e AnimaçõesEm fadeOut() fazemos o elemento desaparecer com um efeito de dissolução.
Efeitos e AnimaçõesAnimação avançada
$("#item").animate({ width: "70%", opacity: 0.4, marginLeft: "30px", fontSize: "30px", borderWidth: "10px"}, 1500 );
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.