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):
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.
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:
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.
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.
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”
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.
[code]
(document).ready (function() {
$(‘#slidebottom button’).click(
function() {
$(this).next().slideToggle();
});
});
[/code]
Na onde Coloco isso ? (Em que parte)
So novo nisso .-.
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
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…
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…
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