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/

Answer 1

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/

Answer 2

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/