350 likes | 427 Views
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.
E N D
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 fadeInjQuery () é 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 fadeOutjQuery () é 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").slideUp(2000).slideDown(2000);