Pergunta
Eu tenho a seguinte página 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>
A classe hide1
é:
<style>
.hide1 {
background: url(back.png) no-repeat;
}
</style>
E a função jQuery é:
<script>
$(document).ready(function(){
$("div.mover").click(function () {
$("div.hide1").fadeTo("slow", 0.33);
});
});
</script>
Meu problema é que a página inteira desaparece. Mas eu só quero desaparecer a imagem de fundo da div. Como posso fazer isso?
Solução
Que tal adicionar mais uma div com apenas a imagem de fundo e desaparecer exatamente essa?
Algo como:
<div class="wrapper">
<div class="image">
//FADE THIS
</div>
<div class="content">
// DON'T FADE THIS
</div>
</div>
Você pode usar o posicionamento absoluto para as divs internas.
Outras dicas
Você não pode aplicar a opacidade do CSS apenas à imagem de fundo de um elemento.
Você teria que ter dois elementos, um contendo a imagem de plano de fundo (que você pode desbotamento) e outro contendo o conteúdo que não fading. Você os posiciona em cima um do outro usando o posicionamento CSS.
Isso pode se tornar complicado quando a altura do elemento de conteúdo não é conhecida com antecedência, pois você precisa tornar o elemento de fundo a mesma altura; Você pode precisar de uma combinação de posicionamento absoluto e backup de script para o IE6 nesse caso.