Comment estomper les images d'arrière-plan avec jQuery à l'aide d'éléments HTML

Estompage des images d'arrière-plan avec jQuery

Les images d'arrière-plan sont un moyen courant d'ajouter un intérêt visuel aux pages Web ou aux applications. Cependant, vous souhaiterez peut-être effectuer une transition entre plusieurs images d'arrière-plan pour créer un effet dynamique.

Traditionnellement, les fonctions fadeIn et fadeOut de jQuery ne fonctionnent que sur les éléments avec des couleurs d'arrière-plan. Cela présente un défi lorsque l'on tente d'estomper les images d'arrière-plan sans créer de nouveaux éléments HTML pour chaque image.

Solution :

Pour surmonter cette limitation, une solution de contournement courante consiste à utiliser balises pour vos images et masquez-les initialement en utilisant display:none. En positionnant les images de manière absolue, avec un z-index négatif, vous pouvez les faire se comporter comme des arrière-plans. Voici une solution étape par étape :

1. Convertissez vos images d'arrière-plan en tags :

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

   Copier après la connexion

2. Stylisez les images en utilisant CSS :

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

   Copier après la connexion

3. Utilisez jQuery pour faire entrer et sortir les images en fondu :

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

   Copier après la connexion

Exemple de code :

Visitez le lien JSFiddle suivant pour un exemple fonctionnel :

https://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!