JQuery fadein/out of overlay cover box ввода: поля ввода сидят поверх наложения до завершения анимации

Question

У меня есть большой оверлей, который исчезает поверх формы после отправки, давая эффект всей формы " высекая ", и текстовые окна становятся заблокированными (по крайней мере поверхностно). Тем не менее, поля ввода, похоже, сидят поверх наложения до окончания анимации, а затем мгновенно появляются обратно под наложением. Таким образом, вместо того, чтобы текстовые поля постепенно становились серыми (например, вокруг них), их контраст мгновенно изменяется в конце анимации (проверяется с затуханием наложения более чем за 10 секунд).

Это известная ошибка? Уровни z установлены правильно, поэтому я не уверен, что может вызвать проблему ...

Редактирование: Не думаю, что я действительно смогу привести пример, не вставляя весь мой код, но очень странное наблюдение заключается в том, что если я отключу плагин jq_watermark для всех ящиков ввода, один из них будет фиксирован и будет вести себя правильно, а остальные все еще прослушиваются. Я лишил их всех стилей css, и все же все, кроме одного, прослушиваются таким образом. Очень странно.

Answer 1

Звучит немного как проблема stacking context. Установка position или opacity < 1 на элемент помещает его в новый контекст стекирования. Это означает, что пока он исчезает, он может иметь другой контекст стекирования, потому что opacity меньше 1, или потому что jquery меняет position во время запуска анимации, а затем меняет его, когда это делается. Трудно сказать наверняка, хотя и не видя этого для себя.

вещи попробовать:

• Изменить порядок наложения против элементов формы в исходном коде.
• Оберните накладку в div с помощью position:relative.
• Fade to 0.9 вместо того, чтобы видеть, что это проблема контекста стека, вызванная opacity < 1, или если это вызвано установкой jquery position.
• Убедитесь, что все элементы, на которых вы используете z-index, расположены на position. z-index применяется только к элементам с позиционным набором.