Tutoriais CSS | Web Standards | Acessibilidade

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

Publicado em: 2009-02-11 — 101.281 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)

To learn about adding easing effects to your slides, check out Brandon Aaron’s Quick Tip: Add Easing to Your Animations.
To convert any of these slides into a plugin for convenient reuse, see Simple Effects Plugins.
For a whole bunch of ready-made slides and other effects, take a look at jQuery UI.

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.

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Visite o site dos livros.

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 https://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”

Gabriel disse: 2012 - 09 - 23 22:23 GMT
Como sempre o site do Sr Maujor me ajudando imensamente!!! excelente post, muito bem explicado e exatamente o que eu precisava…
Parabéns!
Lais disse: 2012 - 09 - 21 19:11 GMT
estou tentando usar o feito reverso (primeiro deste post) mas ele NÃO FUNCIONA, alguem consegue me garantir o seu funcionamento??
Nerso disse: 2012 - 06 - 12 14:43 GMT
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.
Gilmar Oliveira disse: 2012 - 06 - 6 1:07 GMT
Sabe me informar algum plugin que tenha slide de imagem e texto junto, que o tutorial de facil leitura??

grato,

Gilmar
Luiz disse: 2012 - 04 - 25 9:20 GMT
na função que chama o primeiro efeito está faltando o sinal de $ no início para o efeito funcionar
Vanessa Phillippy disse: 2012 - 03 - 11 8:45 GMT
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.
Raphael Schubert disse: 2012 - 01 - 19 10:25 GMT
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!
Israel Pestilho disse: 2011 - 07 - 28 20:49 GMT
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!
cassio dourado disse: 2011 - 07 - 22 3:03 GMT
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
Mauricio disse: 2011 - 06 - 24 12:18 GMT
Muito bom ……Parabéns
Macapá-AP
Wanessa disse: 2011 - 05 - 4 18:38 GMT
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.
marcio disse: 2011 - 02 - 11 17:43 GMT
Como eu faria pra esconder após um determinado tempo? Tipo, mostra a mensagem e automaticamente esconde sem precisar clicar novamente.
vluzrmos disse: 2010 - 12 - 16 3:22 GMT
Muito legal o post, vlw maujor!
Rodrigo disse: 2010 - 10 - 9 3:43 GMT
Legal..vou colocar em meu site;;
Robert disse: 2010 - 09 - 11 1:47 GMT
[code]
(document).ready (function() {
$(‘#slidebottom button’).click(
function() {
$(this).next().slideToggle();
});
});
[/code]
Na onde Coloco isso ? (Em que parte)
So novo nisso .-.
Fabricio Leite disse: 2009 - 09 - 24 17:57 GMT
Ótima matéria Maujor!
Obrigado por compartilhar…

abração
Renan disse: 2009 - 07 - 14 14:00 GMT
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
Lia disse: 2009 - 05 - 21 17:24 GMT
é verdade que vc tem esse dinossauro da sua marca tatuado?? onde??
Frederico Figo disse: 2009 - 05 - 15 12:11 GMT
Esse artigo realmente merecia uma tradução para o nosso idioma.

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

Abs,
Scaico disse: 2009 - 05 - 8 17:33 GMT
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?
Vida de Programador Web disse: 2009 - 04 - 9 23:37 GMT
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…
Paulo disse: 2009 - 03 - 13 21:46 GMT
Muito bom o tutorial! Estou vendo jquery faz pouco tempo, e cada vez me impressiono mais.
Abraços.
Robson disse: 2009 - 03 - 6 13:55 GMT
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.
Felipe disse: 2009 - 02 - 25 2:15 GMT
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! 😀
Carlos Eduardo disse: 2009 - 02 - 13 19:19 GMT
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 🙂
Edy Segura disse: 2009 - 02 - 12 17:42 GMT
Ótimo tutorial sobre efeitos com jQuery. Muito obrigado por este post Maujor.
Mauro disse: 2009 - 02 - 12 16:53 GMT
Muito legal Maujor!!!

Sempre aumentando nossos conhecimentos.

Abração