FadeIn ou animate de background-image avec <body>

Version imprimable

05/07/2010, 23h54
Eonalias

FadeIn ou animate de background-image avec <body>
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:

$("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:

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:

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

Bonjour,

Est-ce que ceci pourrait te convenir ?

Code:

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

devyan

11/07/2010, 00h10
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...

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:

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é :D 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.