J query aula_02

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

Eventos
Aplicando o evento hover:

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

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.

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

Efeitos e Animações
Formas básicas de animação:

$(‘#item’).show(‘slow’);
$(‘#item’).hide(‘fast’);
$(‘#item’).show(2000);
$(‘#item’).toggle(‘medium’);

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

Mais formas básicas de animação:

$(‘#item’).slideUp();
$(‘#item’).slideDown();
$(‘#item’).fadeIn();
$(‘#item’).fadeOut();

Em slideUp() fazemos o elemento desaparecer com
uma varredura vertical de baixo para cima.

Em slideDown() fazemos o elemento aparecer com
uma varredura vertical de cima para baixo.

Em fadeIn() fazemos o elemento aparecer com um
efeito de dissolução.

Em fadeOut() fazemos o elemento desaparecer
com um efeito de dissolução.

Animação avançada

$("#item").animate({
width: "70%",
opacity: 0.4,
marginLeft: "30px",
fontSize: "30px",
borderWidth: "10px"
}, 1500 );

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.

J query aula_02

Mais conteúdo relacionado

Semelhante a J query aula_02 (8)

Mais de Suissa (20)

J query aula_02