Tidak Boleh Pudarkan Imej Latar Belakang dalam jQuery? Buka kunci Penyelesaian

Tidak Dapat Memudarkan Imej Latar Belakang dalam jQuery? Cuba Ini

Semasa cuba memudarkan imej latar belakang menggunakan jQuery, beberapa pendekatan telah terbukti tidak berjaya, termasuk:

var x = 0;

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

Penyelesaian:

Kunci kepada isu ini terletak pada hakikat bahawa jQuery tidak boleh memudarkan imej latar belakang secara langsung. Untuk mengatasinya, gunakan tag untuk mewakili imej anda dan pada mulanya menyembunyikannya menggunakan paparan: tiada;. Tetapkan kedudukan mereka kepada mutlak dan indeks-z kepada -1 untuk meniru gelagat latar belakang, memaksa mereka muncul di belakang semua elemen lain.

Berikut ialah contoh cara untuk mencapai kesan ini:

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 demonstrasi langsung boleh didapati di http://jsfiddle.net/RyGKV/.

Atas ialah kandungan terperinci Tidak Boleh Pudarkan Imej Latar Belakang dalam jQuery? Buka kunci Penyelesaian. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!