jquery div background fadein
Pregunta
Tengo la siguiente 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>
La clase hide1
es:
<style>
.hide1 {
background: url(back.png) no-repeat;
}
</style>
y la función JQUERY es:
<script>
$(document).ready(function(){
$("div.mover").click(function () {
$("div.hide1").fadeTo("slow", 0.33);
});
});
</script>
Mi problema es que toda la página se desvanece. Pero solo quiero desvanecer la imagen de fondo de div. ¿Cómo puedo hacer esto?
Solución
¿Qué hay de agregar un div más con solo la imagen de fondo y desvanecer solo ese?
Algo como:
<div class="wrapper">
<div class="image">
//FADE THIS
</div>
<div class="content">
// DON'T FADE THIS
</div>
</div>
Puedes usar posicionamiento absoluto para los divs internos.
Otros consejos
No puedes aplicar la opacidad de CSS solo a la imagen de fondo de un elemento.
Tendrías que tener dos elementos, uno que contenga la imagen de fondo (que puedes borrar) y otro que contenga el contenido que no está desapareciendo. Luego, colóquelos uno encima del otro utilizando el posicionamiento CSS.
Esto puede volverse complicado cuando la altura del elemento de contenido no se conoce de antemano, ya que es necesario que el elemento de fondo tenga la misma altura; es posible que necesite una combinación de posicionamiento absoluto y respaldo de script para IE6 en ese caso.