JQuery Div Hintergrund Fadein

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

  •  05-07-2019
  •  | 
  •  

Frage

Ich habe die folgende HTML -Seite:

<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>

Die Klasse hide1 ist:

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

und JQuery -Funktion ist:

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

Mein Problem ist, dass die gesamte Seite verblasst. Aber ich möchte nur das Hintergrundbild von Div verblassen. Wie kann ich das machen?

War es hilfreich?

Lösung

Was ist mit dem Hinzufügen eines weiteren DIV mit nur dem Hintergrundbild und dem Verblassen nur dieses?

Etwas wie:

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

Sie können die absolute Positionierung für die inneren Divs verwenden.

Andere Tipps

Sie können CSS -Deckkraft nicht nur auf das Hintergrundbild eines Elements anwenden.

Sie müssten zwei Elemente haben, eines mit dem Hintergrundbild (das Sie verblassen können) und einen anderen, der den nicht verfüllten Inhalt enthält. Sie positionieren sie dann mithilfe der CSS -Positionierung übereinander.

Dies kann schwierig werden, wenn die Höhe des Inhaltselements im Voraus nicht bekannt ist, da Sie das Hintergrundelement zur gleichen Höhe machen müssen. Möglicherweise benötigen Sie in diesem Fall eine Kombination aus absoluter Positionierung und Skriptsicherung für IE6.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top