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

Fade In/Out

Recolher

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.

Show/Hide

Recolher

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.

SlideUp/Down

Recolher

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.

[/code]

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!

comentários

Olá, eu sou a Gabi e eu criei o "Eu Faço Programas" em 2011, quando ainda trabalhava em desenvolvimento web. Atualmente meu trabalho é focado em estratégia digital e redes sociais. Quer saber mais? www.imgabi.com

3 Comentários

  • Responder novembro 17, 2011

    Zaylin

    This was so hleupfl and easy! Do you have any articles on rehab?

  • Responder janeiro 12, 2012

    Homepage

    … [Trackback]…

    […] Read More here: eufacoprogramas.com/desenvolvimento/jquery-trabalhando-com-efeitos-e-entrada-e-saida-2/ […]…

  • Responder março 4, 2012

    Wikipedia Links

    …Links…

    […]you made running a blog glance[…]…

// Siga as boas práticas: Comente!