2009-10-21 9 views
0

J'ai la page html suivante:jquery fond div FADEIN

<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 classe hide1 est:

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

et la fonction JQUERY est:

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

Mon problème est que le toute la page s'estompe. Mais je veux seulement faire disparaître l'image de fond de div. Comment puis-je faire ceci?

Répondre

0

Qu'en est-il de l'ajout d'un div supplémentaire avec juste l'image d'arrière-plan et l'effacement juste celui-là?

Quelque chose comme:

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

Vous pouvez utiliser le positionnement absolu pour les divs internes.

+0

fonctionne parfaitement ... – air

0

Vous ne pouvez pas appliquer l'opacité CSS uniquement à l'image d'arrière-plan d'un élément.

Vous devez avoir deux éléments, l'un contenant l'image d'arrière-plan (que vous pouvez fondre) et l'autre contenant le contenu sans évanouissement. Vous les positionnez ensuite les uns sur les autres en utilisant le positionnement CSS.

Cela peut devenir difficile lorsque la hauteur de l'élément de contenu n'est pas connue à l'avance, car vous devez définir la même hauteur pour l'élément d'arrière-plan. Vous aurez peut-être besoin d'une combinaison de positionnement absolu et de sauvegarde de script pour IE6 dans ce cas.