2016-10-16 5 views
0

私は基本的にthis Stackoverflow postの人物と同じ問題を抱えていました。ブラウザはCSSとJavascriptの情報をどのような順序で取得するのですか?

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

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

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

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

+1

何かが隠される前に隠れている必要があるのか​​、そしてjQueryが隠された可視性を隠していないと考えるのですか? – adeneo

+0

最初に要素を隠すために 'opacity:0;'を使用したときも同じ問題がありました。また、不透明度を1に戻して、フェードする前にCSSを操作する必要がありました。私はこれらのすべてが一緒に遊ぶ方法を十分に理解していません。 –

答えて

2

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

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

+0

これは私が最終的に理解する必要があったことです、何が起こっている、ありがとう!私の質問はむしろひどい言い方だと思いますが、新しいことを学ぶ初めにあなたが理解していないことを挙げるのは難しいです。 –

1

.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()メソッドの影響を受けます。

1

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

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

+0

hideとfadeInが 'display'属性をどのように操作するか説明してください。私はCSSの 'display:block'や' display:inline'についてしか知りません。 –

+1

@LucaFülbier '.hide()'は 'display'を' none'に設定します。 '.fadeIn()'は 'display'を' block'に設定し、徐々に 'opacity'を増やします。一方、これらの機能では考慮されていない「可視性:隠蔽」があります。 – blex

+2

代わりにjQueryドキュメントを読むのは良いでしょう:['.hide()'](http://api.jquery.com/hide/)と['.fadeIn()'](http:// api .jquery.com/fadein /) –

関連する問題