Jquery – Trabalhando com efeitos e entrada e saída
Em muitos casos, seja para economizar espaço ou para deixar sua interface visualmente bacana, podemos lançar mão da opção do usuário esconder recursos que não lhe interessam no momento. Como já foi mostrado anteriormente, além do uso do show/hide, podemos utilizar também o fadeIn/fadeOut e o slideUp/Down.
Utilizando uma tela como a abaixo trabalharemos com os três recursos.
Criando divs para que possamos ver os efeitos e assim compara-los.
<html>
<head>
<title>Minha primeira página com jQuery</title>
<script language="javascript" type="text/javascript" src="jquery-1.5.2.js"></script>
<style type="text/css">
body {
color: purple;
background-color: #d8da3d; }
.header
{
width: 410px;background-color:orange; color:white; font-family:'Kristen ITC'
}
.content
{
background-color: #eeeeee;
border: 1px dashed #2F4F4F;
border-top: none;
padding: 5px;
padding-top: 10px;
height: auto;
color:teal;
}
</style>
<script type="text/javascript" >
$(document).ready(function () {
$('#boxFadeIn').click(function() {
$('#divContentFade').fadeIn();
});
$('#divFade').click(function() {
$('#divContentFade').fadeOut();
});
$('#boxShow').click(function() {
$('#divContentShow').show();
});
$('#divHide').click(function() {
$('#divContentShow').hide('slow');
});
$('#boxDown').click(function() {
$('#divContentDown').slideDown();
});
$('#divUp').click(function() {
$('#divContentDown').slideUp('slow');
});
});
</script>
</head>
<body>
<h1>Aprendendo Jquery</h1>
<div class="header" ><a href="#" id="boxFadeIn">Fade In/Out</a><div>
<div id="divContentFade" class="content">
<div align="right" id="divFade"><small>Recolher</small></div>
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</div>
<div class="header" ><a href="#" id="boxShow">Show/Hide</a><div>
<div id="divContentShow" class="content">
<div align="right" id="divHide"><small>Recolher</small></div>
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</div>
<div class="header" ><a href="#" id="boxDown">SlideUp/Down</a><div>
<div id="divContentDown" class="content">
<div align="right" id="divUp"><small>Recolher</small></div>
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</div>
</body>
</html>
Cada um com um tipo de animação diferente, mas todos produzindo o mesmo “efeito final”. Basta escolher o que mais de adapta a sua necessidade e aplicar em seu projeto!
Lembre-se ainda que todos eles podem ainda ser customizáveis em relação à velocidade (slow/fast):
$('#divUp').click(function() {
$('#divContentDown').slideUp('slow');
});
Ou ainda em relação ao tempo – SEMPRE em milisegundos:
$('#divUp').click(function()
{$('#divContentDown').slideUp('slow');},
4000);
Fique atendo à posição das personalizações! E até o próximo post 🙂
Eu Faço Programas 