JQuery рывков анимация, происходит только в определенных обстоятельствах

Question

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

http://iamalexkempton.net/themes/windowed/noslider.html

Существует множество скрытых DIV, использующих CSS. Они раскрываются с помощью навигации. DIV могут быть снова скрыты с помощью значка «X». Ошибка происходит только с DIV "профиля" и "DIV" привет ". В «привет» DIV, он не дергается, потому что jScrollPane активирован, но вы можете видеть, что что-то идет не так, потому что есть огромный разрыв в нижней части контента, которого не должно быть.

Странно, ошибка ТОЛЬКО однажды. Кроме того, это ТОЛЬКО происходит, если никакие другие DIV не были обнаружены до этого Если вы нажали «теги», а затем «профиль», ошибка не произойдет. Это происходит только тогда, когда сначала нажимается «профиль», а потом никогда.

Ошибка происходит в FF и Chrome, а не в IE9, что заставляет меня думать, что это как-то связано с рендерингом CSS, но тот факт, что это происходит только при определенных обстоятельствах, очень меня смущает.

Я понимаю, что это очень специфическая проблема, но я надеюсь, что кто-то сможет пролить свет на это!

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

Answer 1

Разобрался, что вызывает мерцание. Это Google Fonts мигает на секунду при рендеринге. Это означает, что это происходит только один раз, потому что после того, как они загружены (в любом DIV), они больше не делают это мерцание. По-видимому, это называется FOUT (Flash из Unstyled Text).

Чтобы исправить это, я просто загружаю в документ тег невидимого заголовка (я использую шрифты Google для заголовков), которого достаточно для отображения шрифта, а не мерцания при открытии первого DIV. Немного грязно, но делает свое дело.

$("body").append('<h1 style="visibility:hidden">M</h1>'); 

Answer 2

Попробуйте окружить проблему скрытыми элементами div с помощью стиля, установленного в position: относительный.

<div style="position:relative;">
    <div id="hello" class="window  large">
        hello contents here
    </div>
</div>

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

Answer 3

Я не вижу никаких проблем с рывками, когда коробки открываются.Я использую Chrome, и мне кажется, что показ и расширение работают нормально.Или, возможно, я неправильно читаю ваш вопрос.У вас есть проблемы, когда коробки расширяются?С моей стороны это выглядит гладко.

Я заметил, что «кнопка сворачивания» и кнопка «закрыть» меняются местами на некоторых открытых панелях.Это немного сбивает с толку.