Blog do Maujor - Tutoriais e pensamentos, CSS, web standards, acessibilidade, tableless

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

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

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.

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.

----------------x-x-x---------------    fim da matéria    ---------------x-x-x---------------

Livros do Maujor

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.