Slide right to left?

Question

How can I 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.

Answer 1

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

Reference: https://api.jquery.com/animate/

Answer 2

This can be achieved natively using the jQueryUI hide/show methods. Eg.

    // To slide something leftwards into view,
    // with a delay of 1000 msec
    $("div").click(function () {
          $(this).show("slide", { direction: "left" }, 1000);
    });

Reference: http://docs.jquery.com/UI/Effects/Slide

Answer 3

Use this:

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

Live demo

Improved version

Some code has been added to the demo, to prevent double margin on double click: http://jsfiddle.net/XNnHC/942/

Use it with easing ;)

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

• Extra JavaScript codes removed.

• Class names & some CSS codes changed

• Added feature to find if is expanded or collapsed

• Changed whether use easing effect or not

• Changed animation speed

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

Answer 4

Take a look at this working example on Fiddle, which uses jQuery UI. It is a solution I've used originally from left to right, but I've changed it to work from right to left.

It allows user to click on links quickly without breaking the animation among the available panels.

The JavaScript code is simple:

$(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;
    });
});

Get HTML and CSS at the Fiddle link.

Added white background and left-padding just for better effect presentation.

Answer 5

Use This

<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>

Answer 6

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

Answer 7

I've done it this way:

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

Note, that node "btn" should be hidden before animation, and you might also need to set "position: absolute" to it.

Answer 8

Another worth mentioning library is animate.css. It works great with jQuery, and you can do a lot of interesting animations simply by toggling CSS classs.

Like..

$("#slide").toggle().toggleClass('animated bounceInLeft');

Answer 9

or you can use

$('#myDiv').toggle("slide:right");

Answer 10

GreenSock Animation Platform (GSAP) with TweenLite / TweenMax provides much smoother transitions with far greater customization than jQuery or CSS3 transitions. In order to animate CSS properties with TweenLite / TweenMax, you'll also need their plugin called "CSSPlugin". TweenMax includes this automatically.

First, load the TweenMax library:

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

Or the lightweight version, 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>

Then, call your animation:

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

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

You can also call it with an ID selector:

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

If you have jQuery loaded, you can use more advanced broad selectors, like all elements containing a specific class:

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

For full details, see: TweenLite Documentation

According to their website: "TweenLite is an extremely fast, lightweight, and flexible animation tool that serves as the foundation of the GreenSock Animation Platform (GSAP)."

Answer 11

You can define first the width of the element as 0, floating right, and then on the event that you are about to show it.. it would be like

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

Simple as that.

Answer 12

An example of right to left animation without jQuery UI, just with jQuery (any version, see 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>

Answer 13

Check the example here.

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

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

Answer 14

An example done by me using the scroll (just HTML, CSS and JS, just with the jquery library). When scrolls down a button will slide left.

Also, I suggest you if the only one that you want is this effect, don't use jQuery UI because it's too heavy(if you just want to use it for that).

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

Check this example

Answer 15

If your div is absolutely positioned and you know the width, you can just use:

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

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

Which will slide it off screen.

Alternatively, you could wrap it a container 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);

Answer 16

I ran into a similar problem while trying to code a menu for small screen sizes. The solution I went with was to just shov it off the viewport.

I made this using SASS and JQuery (No JQuery UI), but this could all be achieved in native JS and CSS.

https://codepen.io/maxbethke/pen/oNzMLRa

var menuOpen = false

var init = () => {
    $(".menu__toggle, .menu__blackout").on("click", menuToggle)
}

var menuToggle = () => {
    console.log("Menu:Toggle");
    $(".menu__blackout").fadeToggle();

    if(menuOpen) { // close menu
        $(".menu__collapse").css({
            left: "-80vw",
            right: "100vw"
        });
    } else { // open menu
        $(".menu__collapse").css({
            left: "0",
            right: "20vw"
        });
    }

    menuOpen = !menuOpen;
}

$(document).ready(init);

.menu__toggle {
    position: absolute;
    right: 0;
    z-index: 1;
}

.menu__blackout {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10;
}

.menu__collapse {
  position: absolute;
  top: 0;
  right: 100vw;
  bottom: 0;
  left: -80vw;
  background: white;
  -webkit-transition: ease-in-out all 1s;
  transition: ease-in-out all 1s;
  z-index: 11;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="menu__toggle">Toggle menu</button>

<menu class="menu">
  <div class="menu__blackout"></div>
  <div class="menu__collapse">
    <ul class="list">
      <li class="list__item">
        <a class="list__item__link" href="#section1">Menu Item 1</a>
      </li>
      <li class="list__item">
        <a class="list__item__link" href="#section2">Menu Item 2</a>
      </li>
      <li class="list__item">
        <a class="list__item__link" href="#section3">Menu Item 3</a>
      </li>
      <li class="list__item">
        <a class="list__item__link" href="#section4">Menu Item 4</a>
      </li>
      <li class="list__item">
        <a class="list__item__link" href="#section5">Menu Item 5</a>
      </li>
    </ul>
  </div>
</menu>