jQuery- divフェージングトラブル

StackOverflow https://stackoverflow.com/questions/1516904

  •  19-09-2019
  •  | 
  •  

質問

id 'content'を持っているdivがあります。見える。 

<div id="wrapper" style="display:block">
  <div id="content">
    Some text
  </div>
</div>

今、私はそれをフェードアウトしたいです：

$('#wrapper').fadeIn( 1500 );
$('#content').click(function(){
   $(this).fadeOut( 1500 );
});

そして、何も起こりません。しかし、私が書いたとき：

$('#content').fadeIn( 1500 );

それは隠れてから再び表示されます。

これがCSSです

#content
{
    height: 100%;
    width: 100%;
}

ブラウザ：Linux Gentooの下のFirefox 3.5.3

upd

コードを入力するとき：

$('#content').hide();

それは正しく隠れています。

upd

私は問題を解決しました...私は理解できません、なぜだったのですか... jquery.minをjqueryに置き換えました

役に立ちましたか？

解決

あなたの質問を理解している場合、2つの問題があります。コンテンツが消えず、クリックするとコンテンツがフェードアウトしません。

両方の問題は、おそらく、ラッパーとコンテンツDIVがドキュメントに登場する前にスクリプトが実行されることによって引き起こされます。もしあなたの <script> タグはにあります <head> それから、あなたのドキュメントの $('#wrapper') フェードインするものは何も見つかりません $('#content') クリックハンドラーを添付するものは何も見つかりません。

最良の解決策は、おそらく、ドキュメントがロードされるまで何かを延期することです。 ready:

$(document).ready(function () {
  $('#wrapper').fadeIn(1500);
  $('#content').click(function () {
    $(this).fadeOut(1500);
  });
});

あるいは、あなたを置くことができます <script> 鬼ごっこ 後 <div> 体内のタグ。

この問題を修正すると、コンテンツが消えますが、ラッパーdivが最初に見えるため、スムーズにはなりません。 style="display:block" ラッパーdiv。あなたはそれを作る必要があります display: none; 代わりに、ページが読み込まれている間にラッパーdivが非表示になるようにします。

これが機能する完全なファイルです。

<html>
<head>
<style type="text/css">
#wrapper
{
    display: none;
}

#content
{
    height: 100%;
    width: 100%;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
  window.alert("Couldn't load jQuery");
</script>
<script>
$(document).ready(function () {
  $('#wrapper').fadeIn(1500);
  $('#content').click(function () {
     $(this).fadeOut(1500);
  });
});
</script>
</head>
<body>
<div id="wrapper">
  <div id="content">
    Some text
  </div>
</div>
</body>
</html>

他のヒント

OSXのFirefox、それは私のために働きます。 IDが一意であることを確認してください。複製がある場合は、正しく機能しない可能性があります。また、あなたのスタイル：ブロックは冗長であり、Divはデフォルトではブロックです。

フェードアウトに$（ '＃content'）とフェデインに$（ '＃conent'）を書きました。その他は、効果がまったく同じように呼ばれており、両方が期待どおりに機能しない理由について説明を提供しません。

また、 "#wrapper"（jqueryの1行目）に＃を除外しています。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top