jQuery slideDown заставляет оболочку div смещаться в firefox

У меня есть div внутри содержащего div (т.е. div «обертки»). Поля этого div-оболочки установлены автоматически, поэтому он центрируется на странице. Когда вы нажимаете кнопку, другой div внутри div-оболочки отображается с помощью функции jQuery slideDown. Однако, когда это происходит, div-оболочка смещается на пару пикселей влево и смещается назад, когда вы снова нажимаете кнопку, чтобы div исчезал с помощью функции слайда jQuery. Вот мой код, div.answer - это div внутри div-оболочки, который вы показываете/скрываете, нажимая кнопку

CSS:

    #wrapper {
        background: url(myimages/bground.jpg);
        text-align: center;
        margin: auto;
        width:1020px;
        border:0px solid red;
    }

    div.answer{
        border: 0px solid #5c5c5c;
        padding:3px;
        margin-left: 29px;
        margin-right: 29px;
        display:none;
    }

Javascript:

    $('span.problemBullet').toggle(function(){
        $('div.answer').slideDown();
        $(this).html(' - ');
        $(this).css('padding','0px 2px 0px 2px');

    },
        function(){
            $('div.answer').slideUp();
            $(this).html(' + ');
            $(this).css('padding', '0px 0px 0px 0px');

        }

    );

«problemBullet» — это маленькая кнопка, которую я создал из элемента span, по которой вы нажимаете, чтобы отображать и скрывать div.

Это отлично работает в Google Chrome и Safari.

Вы можете увидеть это в действии здесь: Нажмите на меня


jquery positioning slideup
person MRichards    schedule 23.08.2012    source источник
comment
Пожалуйста, опубликуйте также HTML :-)   -  person andyb    schedule 24.08.2012
comment
Однажды у меня возникла проблема, когда мне пришлось добавить overflow:hidden; к скользящему объекту. Может стоит попробовать.   -  person romo    schedule 24.08.2012
comment
У вас возникнет та же проблема, если вы замените slidedown и slideup на show и hide?   -  person ebohlman    schedule 24.08.2012
comment
Да, та же проблема с show и hide, хотя немного сложнее сказать.   -  person MRichards    schedule 27.08.2012
comment
Я согласен с Nupur, это расширение содержимого вашей страницы за пределы видимой области и добавление боковой панели.   -  person eteich    schedule 22.12.2012

Ответы (1)


arrow_upward
0
arrow_downward

Как указано в комментариях, это происходит потому, что скольжение вниз по этому div увеличивает высоту тела до точки, в которой оно больше, чем область просмотра, что приводит к появлению полосы прокрутки и, таким образом, смещению всего содержимого влево.

Мое лучшее решение - показать полосу прокрутки по умолчанию с помощью этого css:

body {
    overflow-y: scroll;
}
person Simon    schedule 08.01.2013