Kann das Hintergrundbild in jQuery nicht ausgeblendet werden? Schalten Sie die Lösung frei

Hintergrundbild kann in jQuery nicht ausgeblendet werden? Probieren Sie es aus

Beim Versuch, ein Hintergrundbild mit jQuery auszublenden, haben sich mehrere Ansätze als erfolglos erwiesen, darunter:

var x = 0;

while (true) {
    /* change background-image of #slide using some variation
    of animate or fadeIn/fadeOut with or without setTimeout */
    x++;
}

Lösung:

Der Schlüssel zu diesem Problem liegt in der Tatsache, dass jQuery Hintergrundbilder nicht direkt ausblenden kann. Um dies zu umgehen, verwenden Sie Tags, um Ihre Bilder darzustellen und sie zunächst mit display: none; auszublenden. Setzen Sie ihre Position auf „absolut“ und den Z-Index auf -1, um das Hintergrundverhalten nachzuahmen und sie zu zwingen, hinter allen anderen Elementen zu erscheinen.

Hier ist ein Beispiel, wie dieser Effekt erzielt werden kann:

HTML:

<img src=".." />
<img src=".." />

CSS:

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

jQuery:

function test() {
    $("img").each(function(index) {
        $(this).hide();
        $(this).delay(3000 * index).fadeIn(3000).fadeOut();
    });
}
test();

A Eine Live-Demonstration ist unter http://jsfiddle.net/RyGKV/ verfügbar.

Das obige ist der detaillierte Inhalt vonKann das Hintergrundbild in jQuery nicht ausgeblendet werden? Schalten Sie die Lösung frei. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!