Discussion :

[Eonalias]

Bonjour tout le monde

Je débute avec le "Jkiri" ^^ mais j'adore. Cependant je bloque à un endroit.
Je désire changer le fond de ma page. Celui ci comprend un background-color et un background-image en CSS.

Par Jquery j'aimerai changer l'ensemble du background avec un petit fadeIn.
Ce que j'ai reussi sans animation. Un petit clic sur un lien # et paf sa change.
Cependant pour animer le changement de couleur j'ai du recourir à un plugin (jQuery Color Animations) qui me permet de faire un fadeTo de la couleur initial à la nouvelle simplement :

backgroundColor est propre au plugin.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$("body").stop().animate({'backgroundColor' : '#710023'},500);

Cependant je ne trouve pas d'équivalent pour le background-image.
Et ce qui fonction pour une Div ne fonctionne pas sur body du moins de ce que j'ai pu tester.

Quelqu'un pourrais t'il me mettre sur une piste pour un fadeTo/fadeIn ou avec animate et opacity sur mon image de fond?

Pour plus de details :

JS pour le changement de fond sans animation :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
$('#style3').click(function(){
        $('body').css({'background-color' : '#005671', 'background-image' : 'url(../img/admin/bg3.png)'});

JS avec changement animé de background-color :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
$('#style2').click(function(){
	$("body").stop().animate({'backgroundColor' : '#280071'},500);
	$("body").css({'background-image' : 'url(../img/admin/bg2.png)'});
});

[devyan]

Bonjour,

Est-ce que ceci pourrait te convenir ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
$("body").animate({'opacity' : '0'},500, function() {
    $(this).css({'background-image' : 'url(../img/admin/bg2.png)'})
        .animate({'opacity' : '1'},500);
});

devyan

[Bovino]

L'opacité est une propriété CSS qui s'applique à un élément HTML, donc ce n'est pas possible de modifier l'opacité d'une propriété CSS.

A part la solution de devyan mais qui s'appliquera à tout le contenu de ta page, il n'y a pas de solution...

[Eonalias]

Merci Devyan je suis arrivé a la même conclusion ^^
cela me rassure. Cependant après quelques petites évolutions voici ce qu'il advint de la partie JS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
	$('.style').click(function(c){
		clickcount=1;
		var styleID = ($(this).attr("style_id"));
		var imageID = 'url(../img/admin/' + ($(this).attr("img_value"));
		var couleurID = "#" + ($(this).attr("couleur"));
		$("#bg").animate({'opacity' : '0'},500);
		setTimeout(function()
		{	
			$('body').animate({'backgroundColor' : couleurID},1000);
			$("#bg").css({'background-image' : "'" + imageID + "'", opacity:0});
			setTimeout(function()
			{	
				$("#bg").animate({opacity:0.99},1000);
			},500);
		},500);
		 $.ajax({
   			type: "POST",
   			url: "php_inc/ajax/change_style.php",
   			data: "style=" + styleID,
		 });
		styleID.remove();
		imageID.remove();
		couleurID.remove();
	});
});

Autant dire que mon lvl à évolué même si sa reste encore assez basique.

TOUT fonctionne !!! C'est la fête etc... mais y a qu'avec firefox que je peux faire la fête. Avec Chrome, Safari et Opéra le changement de background image n'est pas appliqué mais si les animations fonctionnent. Si vous avez des pistes, je suis dessus depuis plusieurs jours/nuits, et je ne trouve aucune doc d'une incompatibilité ou de nuances de programmation Jquery (js) selon les navigateurs ...

please Help :'(

merci pour vos réponses. Et désolé de mettre si longtemps à répondre.