Deslize da direita para a esquerda?

390

Como posso fazer com que uma div passe de recolhida para expandida (e vice-versa), mas da direita para a esquerda?

Quase tudo o que vejo lá fora é sempre da esquerda para a direita.

Ryan Montgomery
fonte

Respostas:

378
$("#slide").animate({width:'toggle'},350);

Referência: https://api.jquery.com/animate/

JQGeek
fonte
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);
    });

Referência: http://docs.jquery.com/UI/Effects/Slide

EnGassa
fonte
141
@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
andreszs
76

Usa isto:

$('#pollSlider-button').animate({"margin-right": '+=200'});

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/

h0mayun
fonte
2
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-news
    var 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.

Erwin Julius
fonte
8
requer UI do jQuery
Jeroen K
Sim. É indicado no exemplo de link fornecido [ jsfiddle.net/erwinjulius/az4JL/]
Erwin Julius
19

Usa isto

<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script>
    $(document).ready(function(){
        $("#flip").click(function () {
            $("#left_panel").toggle("slide", { direction: "left" }, 1000);
        });
    });
</script>
Shwet
fonte
7
Sim, você precisa jQuery UI para as opções de flexibilização prolongados
zanderwar
10
$(function() {
  $('.button').click(function() {
    $(this).toggleClass('active');
    $('.yourclass').toggle("slide", {direction: "right"}, 1000);
  });
});
Hil
fonte
11
Sou a favor de comentários, mas esse código é bastante auto-explicativo.
Jon
7

Eu fiz desta maneira:

var btn_width = btn.width();
btn.width(0);
btn.show().animate({width: btn_width}, {duration: 500});

Observe que o nó "btn" deve estar oculto antes da animação, e também pode ser necessário definir "position: absolute" para ele.

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

Gostar..

$ ("# slide"). toggle (). toggleClass ('animação bounceInLeft');

Soichi Hayashi
fonte
5

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.

Primeiro, carregue a biblioteca TweenMax:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>

Ou a versão leve, TweenLite:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/plugins/CSSPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/easing/EasePack.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenLite.min.js"></script>

Em seguida, chame sua animação:

 var myObj= document.getElementById("myDiv");

// Syntax: (target, speed, {distance, ease})
 TweenLite.to(myObj, .7, { x: 500, ease: Power3.easeOut});

Você também pode chamá-lo com um seletor de ID:

 TweenLite.to("#myID", .7, { x: 500, ease: Power3.easeOut});

Se você tiver o jQuery carregado, poderá usar seletores gerais mais avançados, como todos os elementos que contêm uma classe específica:

 // This will parse the selectors using jQuery's engine.
TweenLite.to(".myClass", .7, { x: 500, ease: Power3.easeOut});

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

TetraDev
fonte
4

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.

$('#the_element_to_slide_from_right_left').animate({ width:'your desired width' }, 600);

Simples assim.

Teody C. Seguin
fonte
4

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

$(document).ready(function() {
  var contentLastMarginLeft = 0;
  $(".wrap").click(function() {
    var box = $(".content");
    var newValue = contentLastMarginLeft;
    contentLastMarginLeft = box.css("margin-left");
    box.animate({
      "margin-left": newValue
    }, 500);
  });
});
.wrap {
  background-color: #999;
  width: 200px;
  overflow: hidden;
}
.content {
  width: 100%;
  margin-left: 100%;
  background-color: #eee;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
  click here
  <div class="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>

fremail
fonte
3

ou você pode usar

$('#myDiv').toggle("slide:right");
6563cc10d2
fonte
4
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).

$(window).scroll(function(){
  if ($(this).scrollTop() > 100) {
          event.preventDefault();
          $(".scrollToTop").css({'transform': 'translate(0px, 0px)'});
      } else {
          $(".scrollToTop").css({'transform': 'translate(40px, 0px)'});
      }
  });

Veja este exemplo

Jordi Vicens
fonte
11
Sim, as transições CSS estão entre a melhor maneira de conseguir isso hoje em dia.
Tom Tom
1

Se você divestá absolutamente posicionado e você conhece a largura, basta usar:

#myDiv{
position:absolute;
left: 0;
width: 200px;
}

$('#myDiv').animate({left:'-200'},1000);

O que o deslizará para fora da tela.

Como alternativa, você pode envolver um contêiner div

#myContainer{
position:relative;
width: 200px;
overflow: hidden;
}

#myDiv{
position:absolute;
top: 0;
left: 0;
width: 200px;
}

<div id="myContainer">

<div id="myDiv">Wheee!</div>

</div>

$('#myDiv').animate({left:'-200'},1000);
mundo livre
fonte