ブラウザはCSSとJavascriptの情報をどのような順序で取得するのですか？

Question

私は基本的にthis Stackoverflow postの人物と同じ問題を抱えていました。

提案ソリューションでした：

$('.littleme').css('visibility','visible').hide().fadeIn('slow'); 

コードのこの作品は、私には本当に奇妙な感じ。私はブラウザがHTML/CSSを使ってDOMを構築して、JS/jQueryを使って自由に操作できると思ったのですが、なぜCSSを変更する必要がありますか？

私はCSSとJavascriptの初心者ですから、誰かが説明してください、私の要素をフェードインするためにjQueryを使用する前にCSSを操作する必要があるのですか？

Answer 1

jQueryのcss()、hide()とfadeIn()方法すべてはあなたがロードしたCSSのではなく、DOMを変更。

あなたは、視認性のスタイルを変更するには、この場合、第1 css()を使用して、その後、hide()はnoneに表示スタイルを変更し、 fadeIn()は表示スタイルをblockに変更しますが、透明度をトゥイーンします。

Answer 2

.css() jQueryメソッドは、DOM要素のstyleオブジェクトを更新します。あなたがページ上の<style>要素を介してインポートした実際のCSSのものには触れません。

要素スタイルはCSSによって暗黙のスタイルを上書きします。 jQueryの（またはDOM APIを直接使用）を介してこれらの変更を行うには、HTMLマークアップに混合style特性によって確立された構造に影響を与えている：例えば

<div class=foo style="width: 100%; background-color: red;"> 

。その "スタイル"属性の内容は解析され、DOMノードのstyleプロパティを構築するために使用されます。これがjQuery .css()メソッドの影響を受けます。

Answer 3

.hide()および.fadeIn()は、display属性で再生されます。
しかし、に設定されている場合、明らかに結果は見られません。

これは、あなたが見つけた答えがvisibilityをvisibleに最初に設定することについて話し合っている理由です。