Logo do siteSilhueta da face do Maujor seguida do texto Maujor o dinossauro das CSS

Menu hamburger Três barras horizontais na cor laranja destinadas a ser clicada para abrir o menu menu do site

Você está no BLOG do Maujor. IR PARA O SITE

jQuery – Efeito corrediço em diferentes direções

Publicado em: 2009-02-11 — 91.427 visualizacoes

Embora a biblioteca jQuery tenha nativamente seus métodos para obtenção do efeito corrediço — .slideDown(), .slideUp() e .slideToggle() — em algumas ocasiões pode ser necessário criar o efeito em uma direção diferente daquela disponível nativamente. Felizmente esta é uma tarefa fácil de se projetar.

Efeito corrediço reverso

O método nativo consiste em revelar elementos fazendo o efeito acontecer de cima para baixo Contudo que tal se tivermos necessidade de revelar com um movimento contrário? ou seja, de baixo para cima? A dica é usar CSS criteriosamente. Observe a marcação HTML a seguir:

<button>Efeito corredico reverso</button> <div class ="inner">Executar efeito</div> </div>

Para fazer a div#inner ser revelada de baixo para cima vamos posicioná-la no limite inferior do elemento que a contém (no nosso caso, div#slidebottom):

.slide  {position:relative;}
.slide .inner  {
  position:absolute;
  left:0;
  bottom:0;
  color: #66cc66;}

Outras propriedades CSS, tais como, width, padding, margin, e background-color foram definidas para as duas divs, mas elas se destinaram a apresentação e não são importantes para o funcionamento do script.
Nota: No artigo original tais regras CSS foram omitidas do código mostrado, mas apresento a vocês a folha de estilo completa.

.slide {
	position:relative;
	overflow:hidden;
	height:120px;
	width:350px;
	margin:1em 0;
	background-color:#ffc;
	border:1px solid #999;
	}
	
	.slide .inner {
	position:absolute;
	left:0;
	bottom:0;
	width:338px;
	height:36px;
	padding:6px;
	background-color:#4c5;
	color:#333;
	}
	
	.slide button {margin:.7em 0 0 .7em;}
	
	#slidebottom .inner {display:none;}

Nota: Nesta matéria o termo posicionado refere-se a qualquer elemento cuja propriedade CSS position tenha sido declarada diferente de static. Ambas as divs no nosso exemplo, foram posicionadas — uma de forma absoluta e outra de forma relativa.

Agora podemos escrever o script jQuery tal como fazemos para obtenção do efeito corrediço tradicional:

(document).ready (function() {
  $('#slidebottom button').click(
    function() {
    $(this).next().slideToggle();
   });
});

Veja o efeito em funcionamento:

Efeito corrediço reverso

Efeito corrediço horizontal

Animando a propriedade width

Podemos obter o efeito corrediço para os lados esquerdo e direito. A maneira simples de fazer isto é animando a propriedade CSS width.

$(document).ready(function() {
  $('#slidewidth button').click(function() {
  $(this).next().animate({width: 'toggle'});
  });
});

Neste caso não e necessário posicionar o elemento corrediço.

Efeito corrediço com animação da propriedade CSS width

Animando a propriedade width consegue-se o efeito desejado como vimos, contudo você deve ter observado que o comportamento do texto se modifica a medida que a largura do elemento diminui. Uma maneira de se evitar que o texto vá se acomodando fazendo aparecer mais linhas para contê-lo é usar a declaração CSS white-space: nowrap;, contudo isto pode trazer efeitos indesejados quando o texto for muito longo e utrapasse o comprimento do elemento que o contém.

Efeito corrediço para a esquerda

Uma maneira de se evitar os inconvenientes da acomadação dos textos dentro do elemento corrediço é animando a propriedade CSS left. Neste caso é importante notar que o elemento esteja posicionado. Afinal, não podemos mover um elemento se ele está na posicição estática.

Para este tipo de animação nós precisamos calcular a amplitude do movimento. O código que apresentaremos a seguir faz duas suposições: (1) o elemento a animar possui uma outerWidth() igual ou maior que a do seu elemento-pai e (2) para o elemento a animar foi declarado uma posição inicial left: 0;. Caso uma destas suposições não se verifique você terá que ajustar seu script de acordo.

$(document).ready(function() {
  $('#slideleft button').click(function() {
    var $lefty = $(this).next();
    $lefty.animate({
    left: parseInt($lefty.css('left'),10) == 0 ? -$lefty.outerWidth() : 0
  });
});

Usamos, no script, o operador ternário que diz o seguinte: “Se a propriedade CSS for igual a 0 movimente o elemento para a esquerda de uma quantidade de pixels igual à sua largura (incluindo padding e border); se não, movimente de volta para a posição 0.”

Efeito corrediço com animação da propriedade CSS left.

Aqui também precisamos declarar overflow: hidden; para o elemento-pai com a finalidade de esconder o elemento corrediço.

Efeito corrediço com animação da propriedade CSS margin.

Finalmente, podemos obter o mesmo efeito da animação para a esquerda animando a propriedade CSS margin-left. Aqui também precisaremos da declaração overflow: hidden; para o elemento-pai, mas o elemento corrediço não precisa ser posicionado.

$(document).ready(function() {
$('#slidemarginleft button').click(function() {
var $marginLefty = $(this).next();
  $marginLefty.animate({
  marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 0 ? $marginLefty.outerWidth() : 0
  });
});
});

Apenas para variar vamos animar para a direita.

Efeito corrediço com animação da propriedade CSS margin-left

Com mais algumas variações estes efeitos podem ser empregados para se obter um efeito acordeon horizontal.

Leitura complementar (em inglês)

Créditos

Este artigo é uma tradução do original em inglês escrito por Karl Swedberg publicado em Slide Elements in Different Directions sob licença da Criative Commons.

Livros do Maujor

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Clique a "capinha" para visitar o site do livro.

capa livro jQuery   capa livro ajaxjQuery   capa livro css   capa livro html   capa livro javascript   capa livro html5   capa livro css3   capa livro jQuery Mobile   capa livro jQuery UI   capa livro SVG   capa livro RWD   capa livro foundation   capa livro HTML5 e CSS3   capa livro Bootstrap3   capa livro Sass e Compass

Esta matéria foi publicada em: 2009-02-11 (quarta-feira). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para http://www.maujor.com/blog/2009/02/11/jquery-efeito-corredico-em-diferentes-direcoes/trackback no seu site.

27 comentários na matéria: “jQuery – Efeito corrediço em diferentes direções”

  1. GabrielNo Gravatar disse:

    Como sempre o site do Sr Maujor me ajudando imensamente!!! excelente post, muito bem explicado e exatamente o que eu precisava…
    Parabéns!

  2. LaisNo Gravatar disse:

    estou tentando usar o feito reverso (primeiro deste post) mas ele NÃO FUNCIONA, alguem consegue me garantir o seu funcionamento??

  3. NersoNo Gravatar disse:

    Efeito corrediço para a esquerda
    eu gostaria de saber se tem como ele já aparecer sem o conteúdo?
    Só quando o usuario clicar aparecer o conteúdo.

  4. Gilmar OliveiraNo Gravatar disse:

    Sabe me informar algum plugin que tenha slide de imagem e texto junto, que o tutorial de facil leitura??

    grato,

    Gilmar

  5. LuizNo Gravatar disse:

    na função que chama o primeiro efeito está faltando o sinal de $ no início para o efeito funcionar

  6. Vanessa PhillippyNo Gravatar disse:

    Que texto intrigante! Sem firulas, você foi direto ao ponto e sanou todas minhas questões sobre esse assunto. Gosto muito seu modo de escrever, continue com o ótimo trabalho.

  7. Raphael SchubertNo Gravatar disse:

    Pros novatos de plantao… Eu também sou! hehehe só quero dividir um pouco do meu ínfimo conhecimento…

    $(document).ready(function(){
    $(“seletor”).FUNCAO(“valor1″,”valor2”);
    });

    Se desejar que alguma coisa seja feito dentro da funcao… o codigo ficaria assim…

    $(document).ready(function(){
    $(“seletor”).nomadafuncao(function(){
    $(“seletor”).nomedafuncao();
    });
    });

    Se alguem tiver duvidas basicas sobre jQuery.. manda um e-mail ai… rfswdp@gmail.com
    Se eu puder responder será um prazer…

    Quanto a duvidas sobre o que é um seletor… me encaminha um e-mail que eu explico… vlw!

  8. Israel PestilhoNo Gravatar disse:

    Galera pra quem esta com duvidas basicas de como usar o que o major explicou, ae vai um link pra vcs darem uma olhada.

    http://test.learningjquery.com/moreslide.html

    ae é só exibir o codigo fonte e pronto!

  9. cassio douradoNo Gravatar disse:

    eu prefiro um tijoão… a vantagem da coletânea e que poderei comprar de um a um. Quanto ao “tijolão” o investimento vai ser bem maior

  10. MauricioNo Gravatar disse:

    Muito bom ……Parabéns
    Macapá-AP

  11. WanessaNo Gravatar disse:

    Onde coloco o código:

    $(document).ready(function() {
    $(‘#slidewidth button’).click(function() {
    $(this).next().animate({width: ‘toggle’});
    });
    });

    Obrigada!
    Sou fã do seu trabalho. Sempre tiro minhas dúvidas com seus tutoriais.

  12. marcioNo Gravatar disse:

    Como eu faria pra esconder após um determinado tempo? Tipo, mostra a mensagem e automaticamente esconde sem precisar clicar novamente.

  13. vluzrmosNo Gravatar disse:

    Muito legal o post, vlw maujor!

  14. RodrigoNo Gravatar disse:

    Legal..vou colocar em meu site;;

  15. RobertNo Gravatar disse:

    [code]
    (document).ready (function() {
    $(‘#slidebottom button’).click(
    function() {
    $(this).next().slideToggle();
    });
    });
    [/code]
    Na onde Coloco isso ? (Em que parte)
    So novo nisso .-.

  16. Fabricio LeiteNo Gravatar disse:

    Ótima matéria Maujor!
    Obrigado por compartilhar…

    abração

  17. RenanNo Gravatar disse:

    Olá Maujor, muito bom o tutorial, gostei bastante!
    Mas tenho uma dúvida, como colocar (Por exemplo), 4 efeitos reverso em uma unica página com 4 botões, sendo que cada botão ativa um efeito.
    Abraços

  18. LiaNo Gravatar disse:

    é verdade que vc tem esse dinossauro da sua marca tatuado?? onde??

  19. Frederico FigoNo Gravatar disse:

    Esse artigo realmente merecia uma tradução para o nosso idioma.

    É um efeito simples e bonito para aplicar em inúmeras ocasiões.

    Abs,

  20. ScaicoNo Gravatar disse:

    Maujor, eu tenho uma dúvida:

    Se eu quero animar, digamos, duas divs diferentes… Eu percebi que não adianta colocar, por exemplo:

    $('#teste').animate({height: 500}, "slow");
    $('#teste2').animate({width: 500}, "slow");

    Os dois vão ser executados ao mesmo tempo…

    Existe alguma forma de fazer com que a div #teste2 só mude quando a div #teste terminar a sua própria animação?

  21. Vida de Programador Web disse:

    Javascript agora é com a biblioteca jQuery…

    Galera, vou falar de um tema muito legal e muito atual.
    jQuery
    Site oficial: http://jquery.com/.
    Segundo a Wikpédia: 
    JQuery é um framework para ajudar os desenvolvedores a se concentrarem na lógica dos sistemas da web e não nos problemas de…

  22. PauloNo Gravatar disse:

    Muito bom o tutorial! Estou vendo jquery faz pouco tempo, e cada vez me impressiono mais.
    Abraços.

  23. RobsonNo Gravatar disse:

    Bom.. mas uma vez sua contribuição foi fundamental… quero apenas lhe parabenizar pelo otimo trabalho que tem feito… e os otimos serviços prestados a toda comunidade de desenvolvedores … iniciantes ou nao… realmente esse é o espirito da coisa…

    Muito Obrigado e que DEUS lhe abençoe.

  24. FelipeNo Gravatar disse:

    Mandou bem Maujor!

    Fico admirado como é fácil programar com jQuery. Essa informação foi de muito boa para iniciantes, como eu!

    Um abraço! 😀

  25. Carlos EduardoNo Gravatar disse:

    Belo tutorial!

    Sempre imaginei a maneira mais “correta” de fazer esse efeito e achei bem interessante essa solução…

    Com certeza vou tentar usá-la quando necessário 🙂

  26. Edy SeguraNo Gravatar disse:

    Ótimo tutorial sobre efeitos com jQuery. Muito obrigado por este post Maujor.

  27. MauroNo Gravatar disse:

    Muito legal Maujor!!!

    Sempre aumentando nossos conhecimentos.

    Abração

Comentário:





Teclar "Enter" cria um novo parágrafo. Teclar "Shift + Enter" causa uma quebra de linha.

Subscribe without commenting

topo