So verblassen Sie Hintergrundbilder mit jQuery mithilfe von HTML-Elementen

Hintergrundbilder mit jQuery verblassen

Hintergrundbilder sind eine gängige Methode, um Webseiten oder Apps visuelles Interesse zu verleihen. Möglicherweise möchten Sie jedoch zwischen mehreren Hintergrundbildern wechseln, um einen dynamischen Effekt zu erzielen.

Traditionell funktionieren die FadeIn- und FadeOut-Funktionen von jQuery nur bei Elementen mit Hintergrundfarben. Dies stellt eine Herausforderung dar, wenn man versucht, Hintergrundbilder auszublenden, ohne für jedes Bild neue HTML-Elemente zu erstellen.

Lösung:

Um diese Einschränkung zu überwinden, besteht eine gängige Problemumgehung in der Verwendung Tags für Ihre Bilder hinzufügen und diese zunächst mit display:none ausblenden. Durch die absolute Positionierung der Bilder mit einem negativen Z-Index können Sie dafür sorgen, dass sie sich wie Hintergründe verhalten. Hier ist eine Schritt-für-Schritt-Lösung:

1. Konvertieren Sie Ihre Hintergrundbilder in Tags:

   <code class="html"><img src="image1.jpg" />
   <img src="image2.jpg" /></code>

2. Formatieren Sie die Bilder mit CSS:

   <code class="css">img {
     position: absolute;
     z-index: -1;
     display: none;
   }</code>

3. Verwenden Sie jQuery, um die Bilder ein- und auszublenden:

   <code class="javascript">function test() {
     $("img").each(function(index) {
    $(this).hide();
    $(this).delay(3000 * index).fadeIn(3000).fadeOut();
     });
   }
   
   test();</code>

Beispielcode:

Besuchen Sie den folgenden JSFiddle-Link für ein funktionierendes Beispiel:

https://jsfiddle. net/RyGKV/

Das obige ist der detaillierte Inhalt vonSo verblassen Sie Hintergrundbilder mit jQuery mithilfe von HTML-Elementen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!