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.
CSS
[code language=”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;
}
[/code]
SCRIPT
[code language=”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’);
});
});
[/code]
HTML
[code language=”html”]
Aprendendo Jquery
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.
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.
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.
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):
[code language=”javascript”] $(‘#divUp’).click(function() {$(‘#divContentDown’).slideUp(‘slow’);
});
[/code]
Ou ainda em relação ao tempo – SEMPRE em milisegundos:
[code language=”javascript”] $(‘#divUp’).click(function(){$(‘#divContentDown’).slideUp(‘slow’);},
4000);[/code]
Para baixar a página com os exemplos, clique aqui.
Fique atendo à posição das personalizações! E até o próximo post 🙂
// Comente!
