Как изменить направление скольжения? - PullRequest
Новая
       29

Как изменить направление скольжения?

0 голосов
/ 13 апреля 2011

Я работаю на боковой панели (слева и справа), которую я могу выдвигать / вставлять с помощью 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: английский не мой родной язык, поэтому текст может быть немного странным ...

Ответы [ 2 ]

0 голосов
/ 13 апреля 2011

там доступно множество примеров ... я надеюсь, что вы можете извлечь нужный кусок ...

Наконец, мы можем добиться того же эффекта, что и левая анимацияанимируя свойство marginLeft.В этом случае нам все еще нужно переполнение: hidden;на родительском элементе, но скользящий элемент не должен располагаться. 

$(document).ready(function() {
    $('#slidemarginleft button').click(function() {
        var $marginLefty = $(this).next();
        $marginLefty.animate({
            marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 0 ? $marginLefty.outerWidth() : 0
        });
    });
});
0 голосов
/ 13 апреля 2011 
 $("#maincontent").animate({ marginRight: "-200px" });

Я думаю, что отрицательное значение маржи будет работать.

или измените его на 

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