Impossible de fondre l'image d'arrière-plan dans jQuery ? Déverrouillez la solution

Impossible de fondre l'image d'arrière-plan dans jQuery ? Essayez ceci

En essayant d'estomper une image d'arrière-plan à l'aide de jQuery, plusieurs approches se sont révélées infructueuses, notamment :

var x = 0;

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

Solution :

La clé de ce problème réside dans le fait que jQuery ne peut pas effacer directement les images d'arrière-plan. Pour contourner ce problème, utilisez balises pour représenter vos images et les masquer initialement en utilisant display: none;. Définissez leur position sur absolue et leur z-index sur -1 pour imiter le comportement d'arrière-plan, les forçant à apparaître derrière tous les autres éléments.

Voici un exemple de la façon d'obtenir cet effet :

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 une démonstration en direct est disponible sur http://jsfiddle.net/RyGKV/.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!