Javascript n'attend pas que la fonction se termine avant d'exécuter la ligne suivante - javascript, jquery, html, css

Je suis en train de faire un changement d’image très simple qui suppose de supprimer l’image actuelle, de changer l’image, puis de revenir à l’image. Voici le code de base ...

    $("#picViewer").fadeOut("slow");
document.getElementById("picViewer").src = "myImage.jpg";
$("#picViewer").fadeIn("slow");

Au lieu de ...

1. Fondu de l'image
2. Changer Src
3. Fondu dans la nouvelle image

Le Javascript n "attend pas la fin du fadeout et c \ 'est ce que vous voyez ...

1. Changer l'image src
2. Disparaître
3. FadeIn

Est-ce que je manque quelque chose? Aussi, voici un bonus, ... JQuery me permettre de passer à une couleur autre que le blanc ou dois-je utiliser un hackery typique pour résoudre le problème?

Réponses:

3 pour la réponse № 1

Le deuxième paramètre optionnel de fadeOut est une fonction de rappel qui sera appelée une fois que l’élément a fini de s’affaiblir.

$("#picViewer").fadeOut("slow", function() {
document.getElementById("picViewer").src = "myImage.jpg";
$("#picViewer").fadeIn("slow");
});

---

4 pour la réponse № 2

.fadeOut accepte un rappel une fois fait. Vous pouvez placer ce que vous voulez arriver après un fondu.

La fonction de rappel fournit également this comme l'élément qui disparaît tout simplement. Vous pouvez réutiliser en utilisant this au lieu d'avoir à utiliser le id à nouveau pour éviter de coder en dur la id de l'élément à plus d'un endroit.

Vous pouvez également chaîner des appels de fonction jQuery. Puisque attr() renvoie l'objet qu'il a modifié (le $(this)), vous pouvez enchaîner .fadeIn() fondre dans ce même élément.

$("#picViewer").fadeOut("slow", function() {
$(this).attr("src","myImage.jpg").fadeIn("slow");
});

En effet, moins de code.

---

0 pour la réponse № 3

Essayer:

$("#picViewer").fadeOut("slow", function(){
document.getElementById("picViewer").src = "myImage.jpg";
$("#picViewer").fadeIn("slow");
});

---

0 pour la réponse № 4

Les animations se déroulent de manière asynchrone. Vous souhaitez donc utiliser le rappel de la méthode d'animation:

$("#picViewer").fadeOut("slow", function () {
//change image src
//fadeIn
...

Si par couleur de fondu vous entendez les couleurs CSS, vous devez utiliser l'interface utilisateur jQuery (ou un autre plug-in), à moins d'utiliser des transitions CSS3, pour animer les modifications de couleur.

---