要素が.animate前にjqueryの.hide（）を使用して隠されたまま（）

Question

私はDOMに隠された検証ポップアップを配置し、フォームが送信されるときに、それをアニメーション化しようとしています。要素を完全に不透明にする前に、.hide()または.css(opacity, 0)のいずれかを使用すると、jQueryアニメーションメソッドが異なる動作をすることがわかりました。

コードの早い段階で、.hide(),.animate()の不透明度プロパティを1に設定すると、コードはまったく機能しません。しかし、.fadeIn（）メソッドは最初に.hide()を使用して動作します。 .css()メソッドで要素のopacityを0に設定すると、.animation()は要素をフェードインします。柔軟性とオプションが追加されたので、.animate()を使用したいと思います。

私は先に行くと.css()アプローチを使用することにしましたが、その後、IE8をサポートしようとして問題に遭遇していました。 .css(opacity, 0)はIE8の要素を非表示にしないので、この時点で唯一のオプションは.fadeIn()を私が達成しようとしているものに使うことです。

は誰にもこの問題に遭遇しており、もしそうなら、私はhideと「フェードイン/フェードアウトmethods toggle the表示

Answer 1

）=あなたからいくつかのアドバイスを燃焼し可能性：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); 

Answer 2

これは、jQueryのソースコードを読むのが本当に便利な場合です。 hide()は実際にはCSSにdisplay:none宣言を設定します。 display:noneが設定されると、不透明度を変更してもその要素は非表示になります。

あなたはその要素が再び見えるようにしたい場合は、まずdisplay:blockを設定する必要があります。これはまさにfadeIn()の機能です。最初にshow()（display:blockに設定されています）を呼び出し、不透明度をアニメーションします。

だから、あなたのオプションは、手動で不透明度のアニメーションを実行している間に自分自身をトグルこの表示を行う、または単にフェードイン/アウトヘルパー・メソッドを使用するかです。

Answer 3

私は以前にもこの問題を抱えていました。私は隠し、フェード、アニメーションの動作についてこの説明を見つけました。

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

私はjqueryのは、すなわちの不安を隠すためにアニメーションの不透明度とブラウザ固有のマンボジャンボの多くを行うと思います。あなたができることは、あなたの要素をオフスクリーンで保持し、htmlで適用し、次にそれを非表示にアニメーション化し、オフスクリーンホルダークラスを削除し、必要に応じてアニメーション化するクラスを持つことです。私のものの一部については100％：絶対と左：

私はポジションを持つクラスを使用します。仕事をしているようだ。