jquery div background fadein
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.hi开发者_运维知识库de1").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?
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.
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.
加载中,请稍侯......
精彩评论