JQUERY – PARTE 2
Programação de Scripts
Efeitos de Exibição

hide() e show()
 Com
jQuery, você pode se esconder e mostrar
elementos HTML com o hide () e show ():
 $("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
Efeitos de Exibição


O parâmetro de velocidade opcional especifica a
velocidade da esconder / mostrar, e pode ter os
seguintes valores: "lentos", "fast", ou milésimos de
segundo.
O parâmetro opcional callback é uma função a ser
executada após o hide () ou show () método for.
Efeitos de Exibição

$("button").click(function(){
$("p").hide(1000);
});
Efeitos de Exibição

toggle()
 Com
jQuery, você pode alternar entre o hide () e show
() métodos com o método de alternância ().
 Elementos mostrados são escondidos e elementos
ocultos são mostrados:
 $("button").click(function(){
$("p").toggle();
});
Efeitos de Exibição


O parâmetro opcional de velocidade pode ter os
seguintes valores: "lentos", "fast", ou milésimos de
segundo.
O parâmetro opcional callback é uma função a ser
executada após alternar () completa.

$(selector).toggle(speed,callback);
Efeitos de Fade


Com jQuery você pode desaparecer um elemento
dentro e fora de visibilidade.
jQuery tem os seguintes métodos de fade:
 fadeIn()
 fadeOut()
 fadeToggle()
 fadeTo()
Efeitos de Fade

O método fadeIn jQuery () é usado para
desaparecer em um elemento escondido.
 $(selector).fadeIn(speed,callback);


O parâmetro de velocidade opcional especifica a
duração do efeito. Ele pode ter os seguintes
valores: "lentos", "fast", ou milésimos de segundo.
O parâmetro opcional callback é uma função a ser
executada após o desaparecimento completa.
Efeitos de Fade
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
Efeitos de Fade

fadeOut()
O
método fadeOut jQuery () é usado para
desaparecer um elemento visível.
 $(selector).fadeOut(speed,callback);


O parâmetro de velocidade opcional especifica a
duração do efeito. Ele pode ter os seguintes
valores: "lentos", "fast", ou milésimos de segundo.
O parâmetro opcional callback é uma função a ser
executada após o desaparecimento completa.
Efeitos de Fade

$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
Efeitos de Fade

fadeToggle()
O
método fadeToggle() alterna entre o fadeIn () e
fadeOut() métodos.
 Se os elementos vão desaparecendo gradualmente,
fadeToggle () vai desaparecer dentro
 Se os elementos estão desbotadas em, fadeToggle ()
vai desaparecer
 $(selector).fadeToggle(speed,callback);
Efeitos de Fade

$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
Efeitos de Fade

fadeTo()
O
método fadeTo() permite esmurecer para uma
determinada opacidade (valor entre 0 e 1).
 O parâmetro da velocidade requerida especifica a
duração do efeito. Ele pode ter os seguintes valores:
"lentos", "fast", ou milésimos de segundo.
 O parâmetro opacidade desejada na fadeTo ()
especifica o método de desvanecimento para uma
dada opacidade (valor entre 0 e 1).
 O parâmetro opcional callback é uma função a ser
executada após a função terminar.
Efeitos de Fade

$("button").click(function(){
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
});
Efeitos de Movimento


Com jQuery você pode criar um efeito de
deslizamento sobre os elementos.
jQuery tem os seguintes métodos:
 slideDown()
 slideUp()
 slideToggle()
Efeitos de Movimento

slideDown()
O
método slideDown() é usada para deslizar para
baixo de um elemento.
 $(selector).slideDown(speed,callback);
O
parâmetro de velocidade opcional especifica a
duração do efeito. Ele pode ter os seguintes valores:
"lentos", "fast", ou milésimos de segundo.
 O parâmetro opcional callback é uma função a ser
executada após a conclusão do deslizamento.
Efeitos de Movimento

$("#flip").click(function(){
$("#panel").slideDown();
});
Efeitos de Movimento

slideUp()
 método
slideUp () é usada para deslizar para cima de
um elemento.
 $(selector).slideUp(speed,callback);
O
parâmetro de velocidade opcional especifica a
duração do efeito. Ele pode ter os seguintes valores:
"lentos", "fast", ou milésimos de segundo.
 O parâmetro opcional callback é uma função a ser
executada após a conclusão do deslizamento.
Efeitos de Movimento

$("#flip").click(function(){
$("#panel").slideUp();
});
Efeitos de Movimento

slideToggle()
 slideToggle
() método alterna entre o slideDown () e
slideUp () métodos.
 Se os elementos foram deslizou para baixo,
slideToggle () irá deslizar.
 Se os elementos foram deslizou para cima, slideToggle
() irá deslizar para baixo.
 $(selector).slideToggle(speed,callback);
Efeitos de Movimento

$("#flip").click(function(){
$("#panel").slideToggle();
});
Efeitos de animação





O método animate() é usada para criar animações
personalizadas.
O parâmetro params exigido define as propriedades CSS
para ser animado.
O parâmetro de velocidade opcional especifica a duração
do efeito. Ele pode ter os seguintes valores: “slow", "fast",
ou milésimos de segundo.
O parâmetro opcional callback é uma função a ser
executada após a animação completa.
O exemplo a seguir demonstra um uso simples de animate()
método, que move um elemento <div> para a esquerda,
até que chegou a uma propriedade esquerda de 250px:
Efeitos de animação
$("button").click(function(){
$("div").animate({left:'250px'})
;
});
Efeitos de animação


$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
Note-se que várias propriedades pode ser
animada, ao mesmo tempo:
Efeitos de animação

animate() – usando valores relativos


Também é possível definir os valores relativos (o valor é, em
seguida, em relação ao valor atual do elemento). Isto é
feito pondo + = ou - = na frente do valor:
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
Efeitos de animação


animate() - Usando valores pre-determinados
Você pode até especificar o valor de uma
propriedade de animação como "show", "hide", ou
"toggle":
 $("button").click(function(){
$("div").animate({
height:'toggle'
});
});
Efeitos de animação

Usando eventos em fila
 Isso
significa que se você escrever várias comandos
animate() chamando uma após a outro, jQuery cria
uma fila de "interna" com estas chamadas.
Efeitos de animação


$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
$("button").click(function(){
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});
Interrompendo uma animação

stop()





O método stop () é usado para interromper uma animação ou
efeito antes de terminar.
O método stop () funciona para todas as funções de efeito
jQuery, incluindo animações deslizantes, desvanecimento e
personalizado.
O parâmetro stopAll opcional especifica se também a fila de
animação deve ser limpo ou não. O padrão é falso, o que
significa que apenas a animação ativo será interrompido,
permitindo que as animações na fila para ser executada depois.
O parâmetro goToEnd opcional especifica se ou não para
completar a animação atual imediatamente. O padrão é false.
Então, por padrão, o método stop () mata a animação atual que
está sendo realizada no elemento selecionado.
Interrompendo uma animação

$("#stop").click(function(){
$("#panel").stop();
});
Função de Retorno




Instruções JavaScript são executados linha por
linha. No entanto, com efeitos, a próxima linha de
código pode ser executado mesmo que o efeito
não está terminado. Isso pode criar erros.
Para evitar isso, você pode criar uma função de
callback.
A função callback é executado depois que o efeito
atual é concluída.
$(selector).hide(speed,callback);
Função de Retorno

$("button").click(function(){
$("p").hide("slow",function(){
alert("The paragraph is now hidden");
});
});

$("button").click(function(){
$("p").hide(1000);
alert("The paragraph is now hidden");
});
Encadeamento






Você pode encadear ações / métodos.
Encadeamento nos permite executar vários métodos jQuery (no
mesmo elemento) dentro de uma única instrução.
Até agora temos estado a escrever declarações jQuery um de cada
vez (um após o outro).
No entanto, existe uma técnica chamada encadeamento, que nos
permite executar vários comandos jQuery, um após o outro, no
mesmo elemento (s).
A cadeia de uma ação, você simplesmente anexar a ação para a
ação anterior.
O exemplo a seguir cadeias junto a css (), slideUp (), e slideDown ()
métodos. O "p1" elemento primeiro muda para vermelho, então ele
desliza para cima e, em seguida, ele desliza para baixo:
Encadeamento

$("#p1").css("color","red").slideU
p(2000).slideDown(2000);