JQuery - Efeitos Mostrar/Ocultar.
Efeitos Mostrar/Ocultar
Existem varias formas de mostrar e ocultar um conteúdo, com um ou vários botões de acordo com a necessidade.
Para utilizar o Jquery é necessário baixar o arquivo javascript ou utilizar o CDN do Jquery.
Coloque o seguinte CDN logo abaixo da Tag <body> do código HTML.
<script src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous"> </script>
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous"> </script>
Efeitos utilizando hide(), show() e toggle().
- Hide: Esconder o conteúdo.
- Show: Mostrar o conteúdo.
- Toggle: Mostrar e esconder o conteúdo de modo alternado.
Efeitos utilizando fadeIn(), fadeOut, fadeToggle e fadeTo().
- FadeIn: Esconder o conteúdo.
- fadeOut: Mostrar o conteúdo.
- FadeToggle: Mostrar e esconder o conteúdo de modo alternado.
- fadeTo: Tornar visível ou invisível configurado pela opacidade (valor entre 0,0 e 1,0) nesse caso o conteúdo não fica escondido.
Esses efeitos podem receber parâmetros para determinar velocidade ou opacidade, basta colocar dentro do “ (); ”.
Sem parâmetro.
Efeito();
Com velocidade usando número, atenção que a cada 1000 significa 1 segundo.
Efeito(2000);
Com velocidade usando nome.
Efeito(“fast”);
Efeito(“slow”);
Com velocidade usando número e opacidade.
Efeito(800, 0.0);
.limite-1 { width: 50%; }
.botao-1,.texto { border: solid 1px #c3c3c3; padding: 5px; }
.texto { background-color: #fff; color: #000; }
.botao-1 { color: #fff; font: bold; background-color: #673AB7; padding: 5px; width: 100%; }
.botao-1,.texto { border: solid 1px #c3c3c3; padding: 5px; }
.texto { background-color: #fff; color: #000; }
.botao-1 { color: #fff; font: bold; background-color: #673AB7; padding: 5px; width: 100%; }
Modelo do código HTML, atenção que o ID será trocado para cada efeito.
<div class="limite-1">
<button id="bt-1" class="botao-1"> Botão </button>
<article id="div-1" class="texto">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id provident fugit illo dicta eos quo inventore repellat earum non eius ullam facere...
</article>
</div>
<button id="bt-1" class="botao-1"> Botão </button>
<article id="div-1" class="texto">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id provident fugit illo dicta eos quo inventore repellat earum non eius ullam facere...
</article>
</div>
Exemplo das animações com Jquery.
Toggle(), hide() e show();
Toggle() sem velocidade especificada.
$(document).ready(function(){
$("#bt-1").click(function(){
$("#div-1").toggle();
});
});
$("#bt-1").click(function(){
$("#div-1").toggle();
});
});
Exemplo.
Toggle() com velocidade por nome.
$(document).ready(function(){
$("#bt-3").click(function(){
$("#div-3").toggle("slow");
});
});
$("#bt-3").click(function(){
$("#div-3").toggle("slow");
});
});
Exemplo.
SlideToggle() com velocidade por nome, nesse cria um efeito de fechar e abrir mais agradável.
$(document).ready(function(){
$("#bt-4").click(function(){$("#div-7").slideToggle("slow");
});
});
Exemplo.
show() e hide() com velocidade por número, aqui é necessário usar dois botões um para cada função portanto crie no seu código HTML mais uma linha <button>.
$(document).ready(function(){
$("#btnShow-1").click(function(){
$("#div-2").show(200);
});
$("#btnHide-1").click(function(){
$("#div-2").hide(200);
});
});
$("#btnShow-1").click(function(){
$("#div-2").show(200);
});
$("#btnHide-1").click(function(){
$("#div-2").hide(200);
});
});
Exemplo.
fadeIn(), fadeOut, fadeToggle e fadeTo():
fadeIn(), fadeOut() sem velocidade especificada.
$(document).ready(function(){
$("#btnHide-2").click(function(){
$("#div-4").fadeOut();
});
$("#btnShow-2").click(function(){
$("#div-4").fadeIn();
});
});
$("#btnHide-2").click(function(){
$("#div-4").fadeOut();
});
$("#btnShow-2").click(function(){
$("#div-4").fadeIn();
});
});
Exemplo.
fadeTo() visível e invisível o conteúdo.
$(document).ready(function(){
$("#btnHide-3").click(function(){
$("#div-5").fadeTo(800, 0.0);
});
$("#btnShow-3").click(function(){
$("#div-5").fadeTo(800, 1.0);
});
});
$("#btnHide-3").click(function(){
$("#div-5").fadeTo(800, 0.0);
});
$("#btnShow-3").click(function(){
$("#div-5").fadeTo(800, 1.0);
});
});
Exemplo.
slideUp() slideDown() mover o conteúdo para cima ou para baixo com velocidade.
$(document).ready(function(){
$("#btnHide-4").click(function(){
$("#div-6").slideUp(800);
});
$("#btnShow-4").click(function(){
$("#div-6").slideDown(800);
});
});
$("#btnHide-4").click(function(){
$("#div-6").slideUp(800);
});
$("#btnShow-4").click(function(){
$("#div-6").slideDown(800);
});
});
Exemplo.
Comentários
Postar um comentário