0

我在一个侧边栏（左和右）工作，我可以用 jQuery 滑出/滑入。双方都有效，但右侧边栏向左滑动而不是向右滑动。我使用以下 jQuery 代码：

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

如何将第二个函数 (ToogleSidebarRight) 的滑动方向更改为向右？

我尝试过这样的事情，但它不起作用：

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

感谢您的帮助！

PS：英语不是我的母语，所以文字看起来可能有点奇怪......

4

2 回答 2

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

我认为保证金的负值会起作用。

或将其更改为

$("#maincontent").animate({ marginLeft: "200px" });
于 2011-04-13T12:21:01.357 回答
0

有很多可用的示例...我希望您能提取所需的部分...

最后，我们可以通过对 marginLeft 属性进行动画处理来实现与左侧动画相同的效果。在这种情况下，我们仍然需要溢出：隐藏；在父元素上，但滑动元素不需要定位。

$(document).ready(function() {
    $('#slidemarginleft button').click(function() {
        var $marginLefty = $(this).next();
        $marginLefty.animate({
            marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 0 ? $marginLefty.outerWidth() : 0
        });
    });
});
于 2011-04-13T12:51:14.303 回答