Javascript Girl
  1. Javascript Girl
  3. Améliorez l'image d'arrière-plan avec jQuery?
Intereting Posts
Utilisation de .apply () avec 'new' operator. Est-ce possible? Quelle est la meilleure façon d'utiliser les données de mise en cache dans js du côté client? Dat.gui comment masquer le menu avec le code Activer l'événement de texte sélectionné en Javascript Comprendre le levage JavaScript et la vérité et le faux JavaScript confirme le bouton d'annulation sans arrêter JavaScript Obtenir l'adresse de localisation de Latitude et Longitude dans Google Maps Webkit et jQuery pullant Comment créer et cloner un objet JSON? Moustache Templating: modèles imbriqués Obtenir jQuery tablesorter pour fonctionner avec des lignes de table cachées / groupées Contenu HTML Division éditable: sélectionnez l'événement de texte ExtJS 4.2: ToolTips n'est pas assez large pour voir le contenu Quelle est la différence entre AJAX avec JavaScript et jQuery? SetTimeout () avec une référence de fonction de chaîne ou (anonyme)? De manière rapide

Améliorez l'image d'arrière-plan avec jQuery?

Jusqu'à présent, j'ai essayé un tas de choses à l'effet de ce qui suit, sans succès: 

<script type="text/javascript"> var x = 0; while (true) { /* change background-image of #slide using some variation of animate or fadeIn/fadeOut with or without setTimeout */ x++; } </script>

Des idées?

Vous pouvez disparaître les couleurs d'arrière-plan, mais pas les images d'arrière-plan. La façon de contourner cela est que vos images soient <img> et qu'elles les cachent par défaut display:none; . Donnez la position:absolute vos images position:absolute et z-index:-1 afin qu'ils agissent comme des antécédents et soient derrière tout le reste.

Voici un exemple rapide d'images disparaissant l'une après l'autre.

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();

Consultez l'exemple de travail à http://jsfiddle.net/RyGKV/

Bien que vous ne puissiez pas fondre directement dans une background-image . Vous pouvez disparaître dans un élément solitaire contenant seulement une background-image …

Voici un exemple

Vous pouvez faire fondre les images inversées! dedans et dehors!

JQuery: 

 $('#yourdiv').animate({opacity: 0}, 0).css("background-image", "url(image.jpeg)").animate({opacity: 1}, 2500);

Modifier:

Cela va s'effacer dans la totalité de la division non sur l'image de fond.

Je suis arrivé parce que je cherchais une solution aux images d'arrière-plan fondues basées sur une modification d'option <select> . J'ai combiné ce que j'avais déjà écrit avec le jsfiddle de Hussein ci-dessus et je suis venu avec ce jsfiddle.net/v4BMC/ .

Cela empile initialement deux images identiques les unes sur les autres. Lorsque le <select> est modifié, l'attribut de style de l'image supérieure est supprimé, la src de l'image inférieure est modifiée et l'image supérieure est évanouie pour révéler la partie inférieure. (L'image supérieure se termine par un style="display:none" qui doit être supprimé au début de l'opération, sinon cela ne fonctionne pas).

J'espère que cela est utile à quelqu'un d'autre et pas trop peu pertinent pour être inclus ici!