jquery div background fadein

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

  •  05-07-2019
  •  | 
  •  

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?

¿Fue útil?

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.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top