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").slideUp(2000).slideDown(2000);