Элемент скрыт с помощью jquery .hide () перед .animate ()

Question

Я пытаюсь разместить скрытое всплывающее окно проверки в DOM, а затем анимировать его при отправке формы.Я обнаружил, что методы анимации jQuery работают по-разному при использовании .hide() или .css(opacity, 0) до анимации элемента до полной непрозрачности.

В начале кода, если я использую .hide(), .animate()со свойством opacity, установленным в 1, не будет работать вообще.Однако метод .fadeIn () сначала работает только с использованием .hide().Если я установлю opacity элемента на 0 с помощью метода .css(), то .animation() исчезнет в элементе.Я хотел бы использовать .animate() из-за гибкости и добавленных опций.

Я решил просто пойти дальше и использовать подход .css(), но затем столкнулся с проблемой при попытке поддержать IE8..css(opacity, 0) не будет скрывать элемент в IE8, поэтому мой единственный вариант на данный момент - использовать .fadeIn() для того, что я пытаюсь выполнить.

Кто-нибудь еще сталкивался с этой проблемой, и если такМогу я получить какой-то совет от вас =)

Answer 1

Это тот случай, когда действительно полезно прочитать исходный код jQuery.hide() фактически устанавливает объявление display:none в CSS.После установки display:none этот элемент будет скрыт, даже если вы измените непрозрачность.

Если вы хотите, чтобы этот элемент снова был виден, вам сначала нужно установить display:block.Это именно то, что делает fadeIn(): сначала он вызывает show() (который устанавливает display:block), затем анимирует непрозрачность.

Таким образом, вы можете либо переключать этот экран при ручном запуске анимации прозрачности, либо просто использовать вспомогательные методы fadeIn / Out.

Answer 2

У меня была эта проблема и раньше. Я нашел это объяснение поведению скрывать, исчезать и оживлять.

http://www.catchmyfame.com/2010/08/31/jquery-hide-vs-fadeout-vs-animate/

Я думаю, что jquery делает много специфичных для браузера mumbo jumbo с непрозрачной анимацией, чтобы скрыть опасения ie. То, что вы могли бы сделать, это иметь класс, который держит ваш элемент вне экрана, примененный в html, затем использовать запрос, чтобы анимировать его невидимым, удалить класс закадрового держателя и затем анимировать его, когда вам это нужно.

Я использую класс с позициями: absolute и left: 100% для некоторых моих вещей. Кажется, работает.

Answer 3

hide и 'fadeIn / fadeOut methods toggle the отображают: css property. Whereas animating the opactiy, does not. I've found the simplest fix for this is to call fadeTo` вместо скрытия и просто исчезают до 0 непрозрачности.

$('#target-element').fadeTo( 0, 0 ).fadeTo( 3000, 1 );