Você também pode adicionar paddingLeft: 'toggle', paddingRight: 'toggle'quando o elemento tiver preenchimento interno.
Piotr_cz
17
Funciona bem, apenas desliza da esquerda para a direita quando eu tento. É possível fazê-lo animar o contrário?
twan 20/05/19
2
O único problema é que, se houver conteúdo no interior, ele o "esmaga" horizontalmente, fazendo com que os controles se movam / redimensionem / encapsulem etc. Existe uma boa solução para isso?
Neil Barnwell
11
Sua necessidade código mais CSSpara olhar como um slide verdadeira esquerda
AmerllicA
11
@ NeilBarnwell, se puder, coloque o conteúdo em um invólucro de largura fixa e tenha o contêiner overflow: hidden.
Ben Philipp
239
Isso pode ser conseguido nativamente usando os métodos hide / show do jQueryUI. Por exemplo.
// To slide something leftwards into view,// with a delay of 1000 msec
$("div").click(function(){
$(this).show("slide",{ direction:"left"},1000);});
@ekerner - isso requer JQueryUI, que é uma biblioteca enorme. Se tudo que você quer é uma simples transição de slides, isso provavelmente não é a resposta;)
Jesse
9
Essa é a melhor maneira se você tiver o jQueryUI instalado.
steampowered
5
Para esclarecer - o arquivo min é de pelo menos 235kb !! Isso é bom, mas vai aumentar consideravelmente a sua página como @Jesse assinala
Ukuser32
11
Usando o construtor personalizado e removendo tudo, exceto a animação do slide, é possível obter o JS minificado abaixo de 20 KB.
Skylar Ittner
Desejo que os documentos da interface do usuário do JQuery tenham exemplos como este. Obrigado
Calcula os valores em 'px', portanto, não é possível para '%'
Faisal Ashfaq
está se movendo para a esquerda a cada clique.
Elyor
Você pode verificar largura externa e usar isso para adicionar a margem direita
Tofandel
22
Dê uma olhada neste exemplo de trabalho no Fiddle, que usa a jQuery UI . É uma solução que usei originalmente da esquerda para a direita, mas a alterei para funcionar da direita para a esquerda.
Ele permite que o usuário clique nos links rapidamente, sem interromper a animação entre os painéis disponíveis.
O código JavaScript é simples:
$(document).ready(function(){// Mostra e nascondi view-newsvar active ="europa-view";
$('a.view-list-item').click(function(){var divname=this.name;
$("#"+active ).hide("slide",{ direction:"right"},1200);
$("#"+divname).delay(400).show("slide",{ direction:"right"},1200);
active = divname;});});
Obtenha HTML e CSS no link Fiddle.
Adicionado fundo branco e preenchimento à esquerda apenas para uma melhor apresentação do efeito.
Por que não usar width: 'toggle'? btn.show().animate({width: 'toggle'}, {duration: 500});é tudo que você precisa, acredito.
Aart den Braber
6
Outra biblioteca que vale a pena mencionar é o animate.css . Funciona muito bem com o jQuery, e você pode fazer muitas animações interessantes simplesmente alternando as classes CSS.
A GreenSock Animation Platform (GSAP) comTweenLite/TweenMaxfornece transições muito mais suaves com uma personalização muito maior do que as transições jQuery ou CSS3. Para animar propriedades CSS com TweenLite / TweenMax, você também precisará do plug-in chamado "CSSPlugin". O TweenMax inclui isso automaticamente.
De acordo com o site:
"O TweenLite é uma ferramenta de animação extremamente rápida, leve e flexível que serve como base da GreenSock Animation Platform (GSAP)".
Um exemplo de animação da direita para a esquerda sem a interface do usuário do jQuery , apenas com o jQuery (qualquer versão, consulte https://api.jquery.com/animate/ ).
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="wrap">
click here
<divclass="content">
I would like to have a div go from collapsed to expanded (and vice versa), but do so from right to left. Most everything I see out there is always left to right.
</div></div>
Ao responder a uma pergunta de dez anos com catorze outras respostas existentes, ajudaria a explicar que nova abordagem sua resposta traz e se teria sido válida quando a pergunta foi feita ou se está usando técnicas que se tornaram disponíveis durante esses dez anos .
Jason Aller
1
Um exemplo feito por mim usando o scroll (apenas HTML, CSS e JS, apenas com a biblioteca jquery). Quando rola para baixo, um botão desliza para a esquerda.
Além disso, sugiro que se o único que você deseja é esse efeito, não use a interface do jQuery porque é muito pesada (se você quiser usá-la apenas para isso).
Respostas:
Referência: https://api.jquery.com/animate/
fonte
paddingLeft: 'toggle', paddingRight: 'toggle'
quando o elemento tiver preenchimento interno.CSS
para olhar como um slide verdadeira esquerdaoverflow: hidden
.Isso pode ser conseguido nativamente usando os métodos hide / show do jQueryUI. Por exemplo.
Referência: http://docs.jquery.com/UI/Effects/Slide
fonte
Usa isto:
Demonstração ao vivo
Versão melhorada
Algum código foi adicionado à demonstração, para evitar margem dupla em clique duplo: http://jsfiddle.net/XNnHC/942/
Use-o com facilidade;)
http://jsfiddle.net/XNnHC/1591/
Códigos JavaScript extras removidos.
Nomes de classe e alguns códigos CSS alterados
Adicionado recurso para descobrir se está expandido ou recolhido
Alterado se usa o efeito de atenuação ou não
Velocidade de animação alterada
http://jsfiddle.net/XNnHC/1808/
fonte
Dê uma olhada neste exemplo de trabalho no Fiddle, que usa a jQuery UI . É uma solução que usei originalmente da esquerda para a direita, mas a alterei para funcionar da direita para a esquerda.
Ele permite que o usuário clique nos links rapidamente, sem interromper a animação entre os painéis disponíveis.
O código JavaScript é simples:
Obtenha HTML e CSS no link Fiddle.
Adicionado fundo branco e preenchimento à esquerda apenas para uma melhor apresentação do efeito.
fonte
Usa isto
fonte
fonte
Eu fiz desta maneira:
Observe que o nó "btn" deve estar oculto antes da animação, e também pode ser necessário definir "position: absolute" para ele.
fonte
width: 'toggle'
?btn.show().animate({width: 'toggle'}, {duration: 500});
é tudo que você precisa, acredito.Outra biblioteca que vale a pena mencionar é o animate.css . Funciona muito bem com o jQuery, e você pode fazer muitas animações interessantes simplesmente alternando as classes CSS.
Gostar..
fonte
A GreenSock Animation Platform (GSAP) com
TweenLite
/TweenMax
fornece transições muito mais suaves com uma personalização muito maior do que as transições jQuery ou CSS3. Para animar propriedades CSS com TweenLite / TweenMax, você também precisará do plug-in chamado "CSSPlugin". O TweenMax inclui isso automaticamente.Primeiro, carregue a biblioteca TweenMax:
Ou a versão leve, TweenLite:
Em seguida, chame sua animação:
Você também pode chamá-lo com um seletor de ID:
Se você tiver o jQuery carregado, poderá usar seletores gerais mais avançados, como todos os elementos que contêm uma classe específica:
Para obter detalhes completos, consulte: Documentação do TweenLite
De acordo com o site: "O TweenLite é uma ferramenta de animação extremamente rápida, leve e flexível que serve como base da GreenSock Animation Platform (GSAP)".
fonte
Você pode definir primeiro a largura do elemento como 0, flutuando para a direita e depois no evento que você está prestes a mostrá-lo.
Simples assim.
fonte
Um exemplo de animação da direita para a esquerda sem a interface do usuário do jQuery , apenas com o jQuery (qualquer versão, consulte https://api.jquery.com/animate/ ).
fonte
Veja o exemplo aqui.
https://jsfiddle.net/q1pdgn96/2/
fonte
ou você pode usar
fonte
Um exemplo feito por mim usando o scroll (apenas HTML, CSS e JS, apenas com a biblioteca jquery). Quando rola para baixo, um botão desliza para a esquerda.
Além disso, sugiro que se o único que você deseja é esse efeito, não use a interface do jQuery porque é muito pesada (se você quiser usá-la apenas para isso).
Veja este exemplo
fonte
Se você
div
está absolutamente posicionado e você conhece a largura, basta usar:O que o deslizará para fora da tela.
Como alternativa, você pode envolver um contêiner
div
fonte