Discussion :

[bipbipman2003]

Bonjour,

j'ai sur ma page web, des boutons me permettent quand je clique dessus d'afficher un div caché et d'en ouvrir un autre avec jquerry et effet .show et .hide.

Lors du clique une autre fonction est appelée pour changer d'image de fond.
changebackground(nomImage) , pour l'instant je change juste le src du backgroundimage pour modifier l'image.
Je voulais donc utiliser jquery dans cette méthode pour faire un effet lors de l'affichage de la nouvelle image de fond.
Je change donc maintenant l'image de fond avec la fonction css de jquery:

Code :

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

$('body').css("background-image","url("+nomImage+")");

Je pensais mettre ceci (fadeIn('slow')) pour faire l'effet mais cela ne fonctionne pas, avez vous une idée et si cela est possible ?

Code :

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

$('body').css("background-image","url("+nomImage+")").fadeIn('slow');

[bipbipman2003]

J'ai effectué d'autres tests en utilisant la fonction animate mais sans succès:

Code :

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

$('body').animate({'background-image' : "url("+nomImage+")"}, 1500 );

Après j'ai essayé de mettre les images de fond directement dans le css:

Code :

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

$('body').toggleClass("image2css","fast");

Il me change bien l'image de fond mais sans effet juste avec un délai d'attente.
Peut être l'afficher tout de suite et travailler ensuite sur l'opacité, à voir je vais tester cela.

[bipbipman2003]

Pas d'idées ? je suis toujours bloqué sur ce problème

[SpaceFrog]

ton body est invisible au départ ???
tu ne peux pas faire un fade juste sur le background css ...
c'est sur le body integral ...

[bipbipman2003]

Au départ le body contient un background image.
Je veux changer ce background image lorsque je clique sur un bouton qui m'ouvre un div caché avec jquery show et qui me change le background image du body, mais je n’arrive pas a mettre d'effet sur le changement du background image.

[Bovino]

Pas étonnant vu que c'est pas possible !
Les propriété background-xxx ne peuvent pas être animées !
Ensuite, il me semble qu'il existe des plugins faisant cela.

[SpaceFrog]

Merci de traduire mes propos Beef

tu ne peux pas faire un fade juste sur le background css ...
c'est sur le body integral ...

soit tu fais el fade sur le body, ou alors tu mets l'image dans une balise img en z-index d'arrière plan ou en background d'un div et tu fais le fadeIn sur la balise img ou div