Hintergrundbilder mit JavaScript ausblenden

Im Gegensatz zum Ausblenden einer Hintergrundfarbe ist das Ausblenden eines Hintergrundbilds mit jQuery keine einfache Aufgabe. Dies liegt daran, dass Hintergrundbilder nicht als Elemente im DOM, sondern als CSS-Eigenschaften behandelt werden.

Eine clevere Problemumgehung besteht jedoch darin, -Tags mit absoluter Positionierung und einem negativen Z-Index zu verwenden, um sie zu erstellen Illusion eines Hintergrundbildes. Indem wir diese Bilder standardmäßig ausblenden und sie mit jQuery ein- und ausblenden, können wir den Effekt des Ausblendens eines Hintergrundbilds simulieren.

Hier erfahren Sie, wie es Schritt für Schritt geht:

1. Fügen Sie Ihrem HTML -Tags hinzu:

Fügen Sie für jedes Hintergrundbild, das Sie ausblenden möchten, ein -Tag hinzu. Positionieren Sie sie absolut und geben Sie ihnen einen negativen Z-Index, um sie hinter allen anderen Elementen zu platzieren:

img {
  position: absolute;
  z-index: -1;
  display: none;
}

2. Schreiben Sie den jQuery-Code:

Verwenden Sie die every()-Methode von jQuery, um die -Tags zu durchlaufen und sie der Reihe nach ein- und auszublenden. Hier ist ein Beispiel:

function fadeImages() {
  $("img").each(function(index) {
    $(this)
      .hide()
      .delay(3000 * index) // delay each image by 3 seconds
      .fadeIn(3000)
      .fadeOut()
  });
}

3. Rufen Sie die Funktion auf:

Rufen Sie die Funktion fadeImages() auf, um den Fading-Prozess zu starten.

Ein funktionierendes Beispiel finden Sie in der Live-Demo unter http://jsfiddle.net/ RyGKV/