Montebugnoli Programação: JQuery 2.x – Trabalhando com Efeitos (jQuery Effects)

No mês passado redigi um artigo inicial sobre o uso de jQuery junto com Asp.Net. Procurei explicar alguns conceitos envolvendo informações importantes e específicas desta versão 2.x. Demonstrei como adquiri-la através do site oficial e efetuar a instalação manual e automática no Microsoft Visual Studio. Foi implementado um projeto base para explorarmos a declaração e sintaxe do código desta biblioteca. Abordei alguns princípios fundamentais como Seletores (Selectors) e Eventos (Events) que proporcionarão uma base para este artigo. Para uma maior compreensão deste artigo, recomendo a leitura do artigo “Asp.Net – Trabalhando com JQuery 2.x”, do mês de Julho de 2015.

Para este mês separei outro tópico muito utilizado no mundo da programação Web, o uso dos Efeitos (jQuery Effects). A biblioteca jQuery fornece diversas técnicas para adicionar animação em um projeto Web, incluindo desde simples animações até efeitos mais sofisticados. Explicarei com sintaxe e exemplos os principais, tais como: jQuery Hide/Show, jQuery Fade, jQuery Slide, jQuery Animate e jQuery Stop(), sendo que cada um destes possuem um ou mais métodos para trabalhar.

1-) jQuery Hide/Show

Dentro deste tópico poderemos ocultar e mostrar elementos HTML utilizando os métodos: Hide() e Show() respectivamente. Outra alternativa seria utilizando um terceiro método, denominado “toggle()”, funcionando para alternar entre os métodos já mencionados acima.

- hide(): Escondendo os elementos.

Sintaxe:

$(selector).hide(speed,callback);

Exemplo:

<!DOCTYPE html>

<html>

<head>

$(document).ready(function(){

$("#hide").click(function(){

$("p").hide();

});

</script>

</head>

<body>

<p>Clique no Botão abaixo para Esconder esta linha.</p>

<button id="hide">Esconder</button>

</body>

</html>

- show(): Mostrando os elementos.

Sintaxe:

$(selector).show(speed,callback);

Exemplo:

<!DOCTYPE html>

<html>

<head>

$(document).ready(function(){

$("#show").click(function(){

$("p").show();

});

</script>

</head>

<body>

<p>Clique no Botão abaixo para Mostrar esta linha.</p>

<button id="show">Mostrar</button>

</body>

- toggle(): Escondendo e Mostrando os elementos.

Sintaxe:

$(selector).toggle(speed,callback);

Exemplo:

<!DOCTYPE html>

<html>

<head>

$(document).ready(function(){

$("button").click(function(){

$("p").toggle();

});

</script>

</head>

<body>

<button>Alternar</button>

<p>Este é um teste The Club.</p>

</body>

</html>

Estes três métodos citados possuem dois parâmetros opcionais, sendo: o primeiro para 
especificar a velocidade da ação, assumindo como: "slow" , "fast" , ou milissegundos e o segundo 
uma função a ser executada após o método ser concluído.

2-) jQuery Fade

Servem para criar efeitos bastante atrativos, onde se produz um fundido através da mudança da propriedade “opacity” do arquivo “CSS”. O efeito “Fade” engloba três principais métodos, sendo “fadeIn()”, “fadeOut()” e “fadeTo()”, ambos serão detalhados abaixo.

- fadeIn(): O método “fadeIn()” faz com que o elemento que o receber apareça na página através da mudança de sua opacidade, fazendo uma transição suavizada finalizando com o valor de opacidade = 1.

Sintaxe:

$(selector).fadeIn(speed,callback);

Exemplo:

<!DOCTYPE html>

<html>

<head>

$(document).ready(function(){

$("button").click(function(){

$("#div1").fadeIn();

$("#div2").fadeIn("slow");

$("#div3").fadeIn(3000);

});

</script>

</head>

<body>

<button>Executar</button><br><br>

</body>

</html>

- fadeOut(): Este método faz com que o elemento que o receba desapareça da página através da mudança de sua opacidade, fazendo uma transição suavizada finaliza com o valor de opacidade = 0.

Sintaxe:

$(selector).fadeOut(speed,callback);

Exemplo:

<!DOCTYPE html>

<html>

<head>

$(document).ready(function(){

$("button").click(function(){

$("#div1").fadeOut();

$("#div2").fadeOut("slow");

$("#div3").fadeOut(3000);

});

</script>

</head>

<body>

<button>Executar</button><br><br>

</body>

</html>

Estes dois métodos citados possuem os mesmos dois parâmetros opcionais descritos no efeito anterior.

- fadeTo(): Permite fazer qualquer mudança de opacidade, a qualquer valor e desde qualquer outro valor.

Sintaxe:

$(selector).fadeTo(speed,opacity,callback);

Exemplo:

<!DOCTYPE html>

<html>

<head>

$(document).ready(function(){

$("button").click(function(){

$("#div1").fadeTo("slow", 0.15);

$("#div2").fadeTo("slow", 0.4);

$("#div3").fadeTo("slow", 0.7);

});

</script>

</head>

<body>

<button>Executar</button><br><br>

</body>

</html>

Além dos dois parâmetros opcionais citados, teremos outro denominado “opacity”, o qual é requerido e especifica o desvanecimento para uma determinada opacidade (valor entre 0 e 1).

3-) jQuery Slide

Com este efeito teremos a possibilidade de deslizamento de componentes pela tela. O jQuery vem com três métodos úteis, sendo: “SlideUp()”, “SlideDown()” e “SlideToggle()”.

- SlideUp(): Tem a finalidade de ocultar os elementos combinados com um efeito de deslizamento para cima.

Sintaxe:

$(selector).slideUp(speed,callback);

Exemplo:

<!DOCTYPE html>

<html>

<head>

$(document).ready(function(){

$("#flip").click(function(){

$("#panel").slideUp("slow");

});

</script>

<style>

#panel, #flip {

padding: 5px;

text-align: center;

background-color: #e5eecc;

border: solid 1px #c3c3c3;

}

#panel {

padding: 50px;

display: none;

}

</style>

</head>

<body>

<div id="flip">Clique aqui para deslizar para cima o painel</div>

<div id="panel">Teste The Club!</div>

</body>

</html>

- SlideDown():Tem a finalidade de ocultar os elementos combinados com um efeito de deslizamento para baixo.

Sintaxe:

$(selector).slideDown(speed,callback);

Exemplo:

<!DOCTYPE html>

<html>

<head>

$(document).ready(function(){

$("#flip").click(function(){

$("#panel").slideDown("slow");

});

</script>

<style>

#panel, #flip {

padding: 5px;

text-align: center;

background-color: #e5eecc;

border: solid 1px #c3c3c3;

}

#panel {

padding: 50px;

}

</style>

</head>

<body>

<div id="flip">Clique aqui para deslizar para baixo o painel</div>

<div id="panel">Teste The Club!</div>

</body>

</html>

- SlideToggle(): Combinação dos efeitos supracitados, se o elemento correspondente é exibido, ele irá esconder com efeito de deslizamento para cima, caso contrário ele será exibido com um deslizamento para baixo.

Sintaxe:

$(selector).slideToggle(speed,callback);

Exemplo:

<!DOCTYPE html>

<html>

<head>

$(document).ready(function(){

$("#flip").click(function(){

$("#panel").slideToggle("slow");

});

</script>

<style>

#panel, #flip {

padding: 5px;

text-align: center;

background-color: #e5eecc;

border: solid 1px #c3c3c3;

}

#panel {

padding: 50px;

display: none;

}

</style>

</head>

<body>

<div id="flip">Clique aqui para deslizar o painel para baixo ou para cima</div>

<div id="panel">Teste The Club!</div>

</body>

</html>

Em ambos os métodos possuíremos dois parâmetros opcionais, sendo o primeiro a velocidade em 
milisegundos do deslizamento (“slow”, “fast” ou em valores em milisegundos). 
Caso o valor for omitido, o padrão a ser aplicado será de 400 milisegundos. Já o parâmetro “callback” 
é uma função a ser executada após a conclusão da tarefa.

4-) jQuery Animate

Trabalha com métodos invólucros (“wrapper method”), o que significa que ele opera em um conjunto de elementos “DOM” previamente selecionados, envolvido por jQuery. Este método permite que você aplique seus próprios efeitos de animação personalizada para os elementos no conjunto. Para fazer isso, temos de fornecer um conjunto de propriedades de estilo CSS e valores que essas propriedades chegará no final da animação.

- animate(): Utilizado para criar animações customizadas.

Sintaxe:

$(selector).animate({params},speed,callback);

Exemplo:

<!DOCTYPE html>

<html>

<head>

$(document).ready(function(){

$("button").click(function(){

$("div").animate({left: '250px'});

});

</script>

</head>

<body>

<button>Iniciar Animação</button>

</body>

</html>

O exemplo que se segue demonstra uma utilização simples do método “animate()”. Move-se um elemento “<div>” para a direita, até que tenha alcançado a posição 250px para à esquerda.

O parâmetro “params” define as propriedades CSS em questão. Os outros dois parâmetros são
 opcionais, sendo o primeiro para  especificar a duração do efeito, assumindo os seguintes valores: 
"slow" , "fast"  ou milissegundos.O parâmetro “callback” é uma função a ser executada após a 
animação for concluída.

5-) jQuery Stop()

Engloba o método “Stop()”, o qual é usado para parar uma animação ou efeito antes de ser concluída. É importante salientar que este método funciona para todas as funções de efeito jQuery.

- Stop(): Parar uma animação antes de ser concluída.

Sintaxe:

$(selector).stop(stopAll,goToEnd);

Exemplo:

<!DOCTYPE html>

<html>

<head>

$(document).ready(function(){

$("#flip").click(function(){

$("#panel").slideDown(5000);

});

$("#stop").click(function(){

$("#panel").stop();

});

</script>

<style>

#panel, #flip {

padding: 5px;

font-size: 18px;

text-align: center;

background-color: #555;

color: white;

border: solid 1px #666;

border-radius: 3px;

}

#panel {

padding: 50px;

display: none;

}

</style>

</head>

<body>

<button id="stop">Parar Deslizamento</button>

<div id="flip">clique para deslizar o painel</div>

<div id="panel">Teste The Club!</div>

</body>

</html>

No exemplo acima implementamos o uso destes efeitos sem a passagem de parâmetros. Este método aceita dois parâmetros booleanos, que por padrão é definida como “false”. O primeiro parâmetro limpa a fila da animação (“stopAll”). Já o segundo parâmetro força a animação atual ser concluída antes de parar (“gotoEnd”).

Conclusões

Podemos aprender neste artigo alguns dos principais efeitos presentes na biblioteca JQuery, podendo ser implementado tanto em Asp.Net quannto em qualquer outro tipo de linguagem. Saliento também que cada efeito possui um ou mais métodos responsáveis por este trabalho.

Agradeço a leitura, um abraço e até o mês que vem!

Referências

https://jquery.com/download/

Montebugnoli Programação

Páginas

sábado, 6 de abril de 2019

JQuery 2.x – Trabalhando com Efeitos (jQuery Effects)

Nenhum comentário:

Postar um comentário