如何改变滑动方向？

Question

I work at an sidebar (left & right) which I can slide out/in with jQuery. Both sides works but the right sidebar slides in left direction instead to right. I use the following jQuery-code:

    jQuery(function ($) {
    var left_open = true;
    var right_open = true;
    $('a#ToogleSidebarLeft').click(function () {
        if (left_open === true) {
            $('#boxwrapper-left').animate({ width: 'hide' });
            $('#leftcolumn').animate({ width: 'hide' });
            $("#maincontent").animate({ marginLeft: "0px" });
            left_open = false;
        } else {
            $('#boxwrapper-left').animate({ width: 'show' });
            $('#leftcolumn').animate({ width: 'show' });
            $("#maincontent").animate({ marginLeft: "220px" });
            left_open = true;
        }
    });
    $('a#ToogleSidebarRight').click(function () {
        if (right_open === true) {
            $('#boxwrapper-right').animate({ width: 'hide' });
            $('#rightcolumn').animate({ width: 'hide' });
            // $('#boxwrapper-right').hide('slide', {width: 'hide', direction: 'right' });
            // $('#rightcolumn').hide('slide', { width: 'hide', direction: 'right' });
            $("#maincontent").animate({ marginRight: "0px" });
            right_open = false;
        } else {
            $('#boxwrapper-right').animate({ width: 'show' });
            $('#rightcolumn').animate({ width: 'show' });
            $("#maincontent").animate({ marginRight: "200px" });
            right_open = true;
        }
    });
});

How can I change the sliding-direction of the second function (ToogleSidebarRight) to right?

I have try something like this but it doesn't works so:

$('#boxwrapper-left').animate({ width: 'hide', direction: 'right' });

Thanks for helping!

PS: English isn't my native language, so the text looks maybe a little bit strange...

Answer 1

 $("#maincontent").animate({ marginRight: "-200px" });

I think negative value of margin will work.

or change it to

$("#maincontent").animate({ marginLeft: "200px" });

Answer 2

there are plenty of examples available ... i hope you can extract the needed piece...

Finally, we can achieve the same effect as the left animation by animating the marginLeft property. In this case, we still need overflow: hidden; on the parent element, but the sliding element does not need to be positioned.

$(document).ready(function() {
    $('#slidemarginleft button').click(function() {
        var $marginLefty = $(this).next();
        $marginLefty.animate({
            marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 0 ? $marginLefty.outerWidth() : 0
        });
    });
});