Deslize da direita para a esquerda?

Como posso ter uma div ir de colapsado para expandido (e vice-versa), mas fazê-lo da direita para a esquerda?

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

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

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

    Isso pode ser feito de maneira nativa usando os methods 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

    Usa isto:

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

    Demonstração ao vivo

    Versão melhorada

    Algum código foi adicionado à demonstração, para evitar dupla margem com duplo clique: http://jsfiddle.net/XNnHC/942/

    Use-o com facilitação;)

    http://jsfiddle.net/XNnHC/1591/

    • Códigos JavaScript extra removidos.

    • Nomes de classs e alguns códigos CSS alterados

    • Adicionado recurso para descobrir se é expandido ou recolhido

    • Mudou se o efeito de atenuação de uso ou não

    • Velocidade de animação alterada

    http://jsfiddle.net/XNnHC/1808/

    Dê uma olhada neste exemplo de trabalho no Fiddle, que usa a interface do usuário do jQuery . É uma solução que usei originalmente da esquerda para a direita, mas mudei para trabalhar da direita para a esquerda.

    Permite que o usuário clique em links rapidamente sem quebrar 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 do Fiddle.

    Adicionado fundo branco e preenchimento à esquerda apenas para melhor apresentação de efeito.

    Tão simples:

        
     $(function() { $('.button').click(function() { $(this).toggleClass('active'); $('.yourclass').toggle("slide", {direction: "right"}, 1000); }); }); 

    Eu fiz assim:

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

    Note que o nó “btn” deve estar oculto antes da animação, e você também pode precisar definir “position: absolute” para ele.

    Você pode definir primeiro a largura do elemento como 0, flutuando para a direita e, em seguida, sobre o evento que você está prestes a mostrá-lo .. seria como

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

    Simples assim.

    Um exemplo de animação da direita para esquerda sem jQuery UI , apenas com 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; } 
      
    click here
    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.

    Outra biblioteca que vale a pena mencionar é animate.css . Ele funciona muito bem com o jQuery, e você pode fazer muitas animações interessantes simplesmente alternando classs CSS.

    Gostar..

    $ (“# slide”). toggle (). toggleClass (‘animado bounceInLeft’);

    GreenSock Animation Platform (GSAP) com TweenLite / TweenMax oferece transições mais suaves com uma personalização muito maior do que as transições jQuery ou CSS3. Para animar as propriedades CSS com o TweenLite / TweenMax, você também precisará do plug-in chamado “CSSPlugin”. TweenMax inclui isso automaticamente.

    Primeiro, carregue a biblioteca TweenMax:

      

    Ou a versão leve, TweenLite:

        

    Então, 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 mais avançados, como todos os elementos que contêm uma class específica:

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

    Para mais detalhes, consulte: Documentação TweenLite

    Segundo o site: “TweenLite é uma ferramenta de animação extremamente rápida, leve e flexível que serve de base para a Plataforma de Animação GreenSock (GSAP)”.

    Veja o exemplo aqui.

     $("#slider").animate({width:'toggle'}); 

    https://jsfiddle.net/q1pdgn96/2/

    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, eu sugiro que se o único que você quer é esse efeito, não use jQuery UI porque é muito pesado (se você quiser usá-lo 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

    Se o seu div estiver absolutamente posicionado e você souber a largura, basta usar:

     #myDiv{ position:absolute; left: 0; width: 200px; } $('#myDiv').animate({left:'-200'},1000); 

    Qual deslizará fora da canvas.

    Alternativamente, você poderia envolver um div recipiente

     #myContainer{ position:relative; width: 200px; overflow: hidden; } #myDiv{ position:absolute; top: 0; left: 0; width: 200px; } 
    Wheee!
    $('#myDiv').animate({left:'-200'},1000);