tu peut meme chainer ton appel a load().


[code]
var toshow = './photo.php?categorie='+categorieSelectionnee+'&photo='+photoSuivante+'&format=big';

$('#big_photo').fadeOut('slow',
function(){
$(this).attr('src',toshow);
}
)
.load(function(){
$(this).fadeIn('slow');
}
);
[/code]

Même si vous avez trouvez vos solutions, j'ai eu le même problème ce matin, et ce topic m'a été utile.
Donc, je me suis dis que peut être pour quelqu'un d'autre, ca peut servir... :)

lol bon bah c'est bon moi aussi j'avais un peu galléré avant de trouver ce truc !

$("#big_photo").fadeOut("normal", function(){
	$("#big_photo").attr({src : './photo.php?categorie='+categorieSelectionnee+'&photo='+photoSuivante+'&format=big';});
	$("#big_photo").load( function(){
		$("#big_photo").fadeIn("fast");
	} );
});

Merci de ton aide, j'avais déjà trouvé (avec beaucoup de difficultés mais j'y suis arrivé :P) :) :
[php]$("#big_photo").fadeOut("normal", function(){
$("#big_photo").attr({src : './photo.php?categorie='+categorieSelectionnee+'&photo='+photoSuivante+'&format=big';});
$("#big_photo").load( function(){
$("#big_photo").fadeIn("fast");
} );
});[/php]

Merci quand même ! :)

Coucou

tu deverais peut être appeller ton nouvel effet une fois que le premier effet est terminé... pour cela... fait qqchose comme cela :


[code]

$(elem).fadeOut("slow", function(){//fonction qui s'execute après ton fadeIn

$(elem2).fadeIn('slow'); // ton element 2 apparait APRES ton element 1
});[/code]

voila j'éspère que ça t'aides...

$("#big_photo").fadeTo("slow", 0.0); // Disparition de la photo actuelle donc apparition du Loading en background
big_photo.src = './photo.php?categorie='+categorieSelectionnee+'&photo='+photoSuivante+'&format=big'; // Changement de l'image pour la suivante
$("#big_photo").load( function() { // Quand cette image doit être chargée
	$("#big_photo").fadeTo("slow", 1.0); // Réapparition de l'image suivante
} );

Bonjour,

Depuis hier soir et ce matin, je cherche comment réaliser cet effet, mais, avec une petite image de Load entre les 2 effets (fadeIn, fadeOut) de façon à se que l'image suivante n'apparait pas en retard... (à cause de la photo qui charge...)

Voilà la partie concernée de mon code HTML/CSS:
[code]<div style="background-image:url(./images/loading.gif); background-repeat:no-repeat; background-position:center;">
<img id="big_photo" src="./photo.php?cat=<?php echo $categorieSelectionnee; ?>&image=01&format=big" title="Photo n&deg;1" alt="Photo n&deg;1" />
</div>[/code]


Et voilà se que j'ai mis dans dans la fonction qui passe à l'image suivante :
[php]$("#big_photo").fadeTo("slow", 0.0); // Disparition de la photo actuelle donc apparition du Loading en background
big_photo.src = './photo.php?categorie='+categorieSelectionnee+'&photo='+photoSuivante+'&format=big'; // Changement de l'image pour la suivante
$("#big_photo").load( function() { // Quand cette image doit être chargée
$("#big_photo").fadeTo("slow", 1.0); // Réapparition de l'image suivante
} );[/php]

Voilà se que j'essaie de faire depuis des heures :
- Faire disparaitre l'image petit à petit grâce à l'opacité.
- L'image du Loading s'affiche donc puisque elle est en background...
- [b]Quand l'image est chargée[/b], il l'a fait réapparaitre (à l'image suivante bien sûr).

Le comportement actuel c'est qu'il n'attends pas que l'image soit chargé, donc du coup, ça fais un peu bugger l'effet attendu...
Ou alors, quand elle est chargée, on dirait qu'il oublie de faire un fadeIn/fadeOut ...

[u]Exemple de comportement bizarre[/u] : Quand je clique sur "Suivant", il passe direct, sans effet à l'image suivante, et fait les 2 effets fadeIn/fadeOut sur la nouvelle image...


Voilà, je vous remercie beaucoup de votre aide :)