11548 sujets

JavaScript, DOM et API Web HTML5

[résolu] JQuery Body Background FadeIn

Bonjour
Je suis tombé sur ce post "JQuery effet FadeIn" qui m'intéresse car j'essaie de faire un arrière plan qui change suivant une tempo. Je trouvais le changement un peu brusque alors j'ai recherché comment procéder.... j'ai trouvé cette astuce ici donc :

jo_link_noir a écrit :
Ah oui, forcement, si l'image n'est pas caché, fadeIn ne ferra rien.
//après chargement du document
$(document).ready(function (){
	jQuery("#Picture").load(function(){
		//on cache l'image immédiatement
		jQuery(this).fadeOut(0, function(){
			//on la ré-affiche avec un effet de transparence
			jQuery(this).fadeIn(8000);
		});
	});
});

Comme ça je pense que c'est bon,
bonne nuit.


Je l'ai donc adapté à mon besoin comme suit :



		<!- css contenant les différentes classes de background -->
       <link rel="stylesheet" href="./css/background.css" type="text/css" media="screen" />

		<SCRIPT LANGUAGE="JavaScript">
		<!--		
		$(document).ready(function(){ 
		    (function(){ 
		        var i = 0; 
		        setInterval(function(){ 
		        	  	
        	        //on cache l'image immédiatement 
        			$("body").removeClass("bg1, bg2").fadeOut(0, function(){ 
          		       //on la ré-affiche avec un effet de transparence 
      		    	   $("body").addClass("bg"+(i++%2 + 1)).fadeIn(500); 
			        }); 
		        }, 10000); 
		    })(); 
		});
		-->
		</SCRIPT>


Voici le code css associé pour plus de compréhension, à noter que je ne sais pas s'il s'agit de la meilleure façon :


.bg1 { background-image:url(../images/fond_site/bg-page.jpg); background-color:#FFFFFF; background-repeat:no-repeat; background-position:top center;}
.bg2 { background-image:url(../images/fond_site/test.jpg); background-color:#FFFFFF; background-repeat:no-repeat; background-position:top center;}


ce n'est qu'à l'essai d'où les noms d'images et autre un peu "basiques". Mon souci se porte ici sur le fade, il fonctionne apparemment mais... pas sur l'image background mais sur tout le site texte et autre... aurais je oublié une partie de code ??
Tu mets $("body") donc c'est sur tout le corps de la page, donc normal que l'effet se fasse sur tout le site.

Dans son cas, il utilise jQuery("#Picture") l'effet n'est donc appliqué que sur l'id #Picture.
Effectivement j'avais envisagé cette réponse là, j'ai procédé ainsi pour appeler l'attribut "background-image" de mon body ...

Existe-t-il un autre moyen ?
Bonjour,

Quelqu'un aurait il une idée pour modifier mon erreur ??

l'appel de cet attribut "background-image" peut-il se faire autrement que de la manière dont j'ai procédé ? Smiley sweatdrop
Après pas mal de recherche, j'ai trouvé une solution pour mon soucis ça pourra peut être aider d'autres personnes.

La méthode est de ne pas appeler le <body> mais de passer par une <div> qui ne gérera que cela.

Pour cela une définition CSS :


#backgroundImage {
	width: 100%;
	height: 100%;
	z-index:-1; /* on le positionne le plus bas possible */
	position: absolute; 
	top: 0px; 
	left: 0px; 
}


L'appel de la div dans le code : 


<div class="bg2" id="backgroundImage"></div><!-- fadein des background -->


et l'appel Javascript :


		<link rel="stylesheet" href="./css/background.css" type="text/css" media="screen" />

		<SCRIPT LANGUAGE="JavaScript">
		<!--
			
		$(document).ready(function(){ 
		    (function(){ 
		        var i = 0; 
		        setInterval(function(){ 
		        	
		        	
		        	//on cache l'image immédiatement 
        			$("#backgroundImage").removeClass("bg1, bg2").fadeOut(150, function(){ 
          		  	//on la ré-affiche avec un effet de transparence 
      		    	  $("#backgroundImage").addClass("bg"+(i++%2 + 1)).fadeIn(500); 
			        }); 
		        }, 10000);
		    })(); 
		});
		
		
		
		-->
		</SCRIPT>


/!\ Ne pas faire d'imbrication du div car sinon tout le contenu subira le fadeIn / fadeOut.

Si vous avez des avis sur cette méthode... je suis preneur Smiley cligne

bonne journée.
Modifié par WuKoDLaK (17 Dec 2010 - 11:00)
Sujet clos
Aller à