how to make div slide from right to left

Question

got a code here from someone....

what I like is to make the sliding div from right slide to left, i mean it hides the div to the right and slowly slides to the left for 300px width.

HTML

<a id="loginPanel">quote</a>
<div id="userNav">User Area</div>

CSS

#loginPanel {
    color: #000;
    cursor:pointer;
}

#userNav {
    width: 200px;
    height: 200px;
    display: none;
    background: #ff0000;
}

Jquery

// Open / Close Panel According to Cookie //    
if ($.cookie('panel') == 'open'){    
    $('#userNav').slideDown('fast');
} else {
    $('#userNav').slideUp('fast');
}

// Toggle Panel and Set Cookie //
$('#loginPanel').click(function(){        
    $('#userNav').slideToggle('fast', function(){
        if ($(this).is(':hidden')) {
            $.cookie('panel', 'closed');
        } else {
            $.cookie('panel', 'open');
        }
    });
});

Please need help on this one. just to make the div slide right to left

here is the fiddle http://jsfiddle.net/7m7uK/195/

But, for someone who has dedicatedly worked on same fiddle, why are you not switching to jQuery 1.9.1? — hjpotter92, Mar 27 '13 at 12:38
Possible duplicate of http://stackoverflow.com/q/596608/1577396 — Mr_Green, Mar 27 '13 at 12:50
Have a look at this link too http://stackoverflow.com/q/4229422/1577396 — Mr_Green, Mar 27 '13 at 12:52

score 15 · Accepted Answer · edited May 23 '17 at 12:19

You can use jQueryUI and additional effects Slide

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

Example:

$('#userNav').hide("slide", {direction: "left" }, 1000);
$('#userNav').show("slide", { direction: "right" }, 1000);

You can't use .slideToggle() to slide from left to right or vice versa, from http://api.jquery.com/slideToggle/:

The .slideToggle() method animates the height of the matched elements. This causes lower parts of the page to slide up or down, appearing to reveal or conceal the items. If the element is initially displayed, it will be hidden; if hidden, it will be shown.

You should try and change your code to implement this code, but I think it's maybe better if you try with @s15199d answer, than you don't need to use jQueryUI

Ok, I created jsfiddle, you must include jQueryUI in order to work, you have different combinations of slide directions:

http://jsfiddle.net/7m7uK/197/

Ok, created another fiddle with cookies

http://jsfiddle.net/7m7uK/198/

thank you for your answer, works but how can I apply the cookies in there? :-( — Francis Alvin Tan, Mar 27 '13 at 13:08
sorry, its bacause i wanted to save its state when opened or closed. — Francis Alvin Tan, Mar 27 '13 at 13:09

Gingi · Answer 2 · 2014-04-28T01:54:44.927

Without depending on JQuery-UI

You need to place the content <div> you mean to slide inside a wrapper <div>. You then set the right margin of the content div to its negative width. The trick with the wrapper <div> is to have its x-overflow set to hidden so that it hides the content <div>. You can then use jQuery's native animate() routine to set the right margin to 0 to make the content <div> appear with a horizontal sliding effect.

HTML:

<div id="slider-wrapper">
    <div id="slider-content">
</div>

CSS:

#slider-wrapper {
    overflow-x: hidden;
}
#slider-content {
    width:         300px;
    margin-right: -300px;
}

JavaScript:

$("#slider-button").click(function () {
    $("#slider-content").animate({ "margin-right": 0 }, "slow");
});

Here's a demo that uses a handle <div> to expand and collapse a div: http://jsfiddle.net/gingi/KUCaL/

Saravanan Kasi · Answer 3 · 2016-09-30T07:11:48.500

SLIDE DIV FROM RIGHT TO LEFT AND LEFT TO RIGHT

<div class="nav ">
       <ul>
        <li><a href="#">HOME</a></li>
        <li><a href="#">ABOUT</a></li>
        <li><a href="#">SERVICES</a></li>
        <li><a href="#">CONTACT</a></li>
       </ul>
   </div>

CSS:

/*nav*/
.nav{
    position: fixed;
    right:0;
    top: 70px;
    width: 250px;
    height: calc(100vh - 70px);
    background-color: #333;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;

}
.nav-view{
    transform: translateX(0);
}

JS:

  $(document).ready(function(){
  $('a#click-a').click(function(){
    $('.nav').toggleClass('nav-view');
  });
});

http://www.themeswild.com/read/slide-navigation-left-to-right

score 0 · Answer 4 · answered Mar 27 '13 at 12:40

0

$("#DivName").animate({"left": "-=300px", "opacity":1}, "slow");

answered Mar 27 '13 at 12:40

s15199d

7,261
11
43
70

hello there, but im not good at this, could you update the fiddle with your working code, that would be very helpful for me, thanks – Francis Alvin Tan Mar 27 '13 at 12:41

score -4 · Answer 5 · answered Mar 27 '13 at 12:35

-4

Have you tried this ?

if ($.cookie('panel') == 'open'){    
    $('#userNav').slideLeft('fast');
} else {
    $('#userNav').slideRight('fast');
}

answered Mar 27 '13 at 12:35

Djouuuuh

1,147
8
16

`slideLeft()` and `slideRight()` are not part of jQuery by default, see [documentation](http://api.jquery.com/category/effects/sliding/) – Maen Mar 27 '13 at 12:37
I'm sorry I thought that it was possible... See this to find a solution : http://docs.jquery.com/UI/Effects/Slide – Djouuuuh Mar 27 '13 at 12:42

how to make div slide from right to left

5 Answers5

Linked