Programação de Scripts

Apresentação em tema: "Programação de Scripts"— Transcrição da apresentação:

1 Programação de Scripts
JQUERY – Parte 2 Programação de Scripts

2 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(); });

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

4 Efeitos de Exibição $("button").click(function(){   $("p").hide(1000); });

5 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(); });

6 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);

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

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

9 Efeitos de Fade $("button").click(function(){   $("#div1").fadeIn();   $("#div2").fadeIn("slow");   $("#div3").fadeIn(3000); });

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

11 Efeitos de Fade $("button").click(function(){   $("#div1").fadeOut();   $("#div2").fadeOut("slow");   $("#div3").fadeOut(3000); });

12 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);

13 Efeitos de Fade $("button").click(function(){   $("#div1").fadeToggle();   $("#div2").fadeToggle("slow");   $("#div3").fadeToggle(3000); });

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

15 Efeitos de Fade $("button").click(function(){   $("#div1").fadeTo("slow",0.15);   $("#div2").fadeTo("slow",0.4);   $("#div3").fadeTo("slow",0.7); });

16 Efeitos de Movimento Com jQuery você pode criar um efeito de deslizamento sobre os elementos. jQuery tem os seguintes métodos: slideDown() slideUp() slideToggle()

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

18 Efeitos de Movimento $("#flip").click(function(){   $("#panel").slideDown(); });

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

20 Efeitos de Movimento $("#flip").click(function(){   $("#panel").slideUp(); });

21 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);

22 Efeitos de Movimento $("#flip").click(function(){   $("#panel").slideToggle(); });

23 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:

24 Efeitos de animação $("button").click(function(){   $("div").animate({left:'250px'}) ; }); 

25 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:

26 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'   }); }); 

27 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'   }); }); 

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

29 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"); }); 

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

31 Interrompendo uma animação
$("#stop").click(function(){   $("#panel").stop(); });

32 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);

33 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"); });

34 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:

35 Encadeamento $("#p1").css("color","red").slideU p(2000).slideDown(2000);