jQuery – Efeito corrediço em diferentes direções
Publicado em: 2009-02-11 — 101.622 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:
1.<div id=""slidebottom"" class=""slide""> 2. <button>Efeito corredico reverso</button>3. <div class ="inner">Executar efeito</div>4.</div>5.</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):
1..slide {position:relative;}2..slide .inner {3. position:absolute;4. left:0;5. bottom:0;6. 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.
01..slide {02. position:relative;03. overflow:hidden;04. height:120px;05. width:350px;06. margin:1em 0;07. background-color:#ffc;08. border:1px solid #999;09. }10. 11. .slide .inner {12. position:absolute;13. left:0;14. bottom:0;15. width:338px;16. height:36px;17. padding:6px;18. background-color:#4c5;19. color:#333;20. }21. 22. .slide button {margin:.7em 0 0 .7em;}23. 24. #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:
1.(document).ready (function() {2. $('#slidebottom button').click(3. function() {4. $(this).next().slideToggle();5. });6.});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.
1.$(document).ready(function() {2. $('#slidewidth button').click(function() {3. $(this).next().animate({width: 'toggle'});4. });5.});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.
1.$(document).ready(function() {2. $('#slideleft button').click(function() {3. var $lefty = $(this).next();4. $lefty.animate({5. left: parseInt($lefty.css('left'),10) == 0 ? -$lefty.outerWidth() : 06. });7.});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.
1.$(document).ready(function() {2.$('#slidemarginleft button').click(function() {3.var $marginLefty = $(this).next();4. $marginLefty.animate({5. marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 0 ? $marginLefty.outerWidth() : 06. });7.});8.});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.
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 http://www.maujor.com/blog/2009/02/11/jquery-efeito-corredico-em-diferentes-direcoes/trackback no seu site.
Como sempre o site do Sr Maujor me ajudando imensamente!!! excelente post, muito bem explicado e exatamente o que eu precisava…
Parabéns!
estou tentando usar o feito reverso (primeiro deste post) mas ele NÃO FUNCIONA, alguem consegue me garantir o seu funcionamento??
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.
Sabe me informar algum plugin que tenha slide de imagem e texto junto, que o tutorial de facil leitura??
grato,
Gilmar
na função que chama o primeiro efeito está faltando o sinal de $ no início para o efeito funcionar
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.
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!
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!
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
Muito bom ……Parabéns
Macapá-AP
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.
Como eu faria pra esconder após um determinado tempo? Tipo, mostra a mensagem e automaticamente esconde sem precisar clicar novamente.
Muito legal o post, vlw maujor!
Legal..vou colocar em meu site;;
[code]
(document).ready (function() {
$(‘#slidebottom button’).click(
function() {
$(this).next().slideToggle();
});
});
[/code]
Na onde Coloco isso ? (Em que parte)
So novo nisso .-.
Ótima matéria Maujor!
Obrigado por compartilhar…
abração
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
é verdade que vc tem esse dinossauro da sua marca tatuado?? onde??
Esse artigo realmente merecia uma tradução para o nosso idioma.
É um efeito simples e bonito para aplicar em inúmeras ocasiões.
Abs,
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?
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…
Muito bom o tutorial! Estou vendo jquery faz pouco tempo, e cada vez me impressiono mais.
Abraços.
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.
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!
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
Ótimo tutorial sobre efeitos com jQuery. Muito obrigado por este post Maujor.
Muito legal Maujor!!!
Sempre aumentando nossos conhecimentos.
Abração