jquery div background fadein

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

  •  05-07-2019
  •  | 
  •  

Question

I have the following html page:

<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>

The class hide1 is:

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

and JQUERY function is:

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

My problem is that the entire page fades. But I only want to fade the background image of div. How I can do this?

Was it helpful?

Solution

What about adding one more div with just the background image and fading just that one?

Something like:

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

You can use absolute positioning for the inner divs.

OTHER TIPS

You can't apply CSS opacity only to an element's background image.

You'd have to have two elements, one containing the background image (which you can fade) and another containing the non-fading content. You then position them on top of each other using CSS Positioning.

This can become tricky when the content element's height isn't known in advance as you need to make the background element the same height; you may need a combination of absolute positioning and script backup for IE6 in that case.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top