jquery div背景フェードイン

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

  •  05-07-2019
  •  | 
  •  

質問

次のhtmlページがあります：

<body>
    <div class="hide1" style="width:1000px; height:1000px;">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td colspan="2" align="center">Heading</td>
        </tr>
        <tr>
          <td width="51%">Left1</td>
          <td width="49%">right 1 </td>
        </tr>

        <tr>
          <td>Left 2 </td>
          <td>right 2 </td>
        </tr>
    </table>
    </div>
</body>

クラス hide1 は次のとおりです。

<style>
.hide1 {
  background: url(back.png) no-repeat;
}
</style>

およびJQUERY関数は次のとおりです。

<script>
 $(document).ready(function(){
 $("div.mover").click(function () {
 $("div.hide1").fadeTo("slow", 0.33);
 });
 });
</script>

私の問題は、ページ全体がフェードすることです。しかし、divの背景画像のみをフェードしたいです。どうすればできますか？

役に立ちましたか？

解決

背景画像だけでdivをもう1つ追加し、その画像だけをフェードするのはどうですか？

次のようなもの：

<div class="wrapper">
  <div class="image">
    //FADE THIS
  </div>
  <div class="content">
    // DON'T FADE THIS
  </div>
</div>

内部divには絶対配置を使用できます。

他のヒント

CSSの不透明度を要素の背景画像にのみ適用することはできません。

2つの要素が必要です。1つは背景画像（フェード可能）を含み、もう1つは非フェードコンテンツを含みます。次に、CSSポジショニングを使用して互いの上に配置します。

これは、背景要素の高さを同じにする必要があるため、コンテンツ要素の高さが事前にわからない場合、注意が必要になります。その場合、絶対位置とIE6のスクリプトバックアップの組み合わせが必要になる場合があります。

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