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

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:
 
Executar efeito 
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.
 
Executar efeito 
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.”
 
Executar efeito 
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.
 
Executar efeito 
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.