[Résolu] Remette l'opacité à 1 après jQuery fadeOut

Bonjour

Dans le cadre de mes travaux de migration vers l'utilisation de jQuery, je pars de la page
http://www.alma-musica.net/html/accueil.html
et je la modifie pour obtenir
http://www.alma-musica.net/tests/alma-accueil.html

Je n'arrive cependant pas à faire fonctionner la galerie de photos en fondu enchaîné.

Comment c'est fait: classiquement, deux images superposées, celle du dessus disparait en fadeOut, à la fin du fadeOut le src de la première est mis à la valeur de la deuxième, son opacité remise à 100%, puis la seconde image est remplacée par la suivante, on laisse affiché un certain temps, puis on relance le fadeOut.

Sur ma version "actuelle" sans jQuery, le fadeOut est réalisé à la mimine: un timer de 10ms modifie la transparence.
Sur ma nouvelle version, voici le code.

            var photoList = [.......];    //liste des images, générée en fait par du PHP
            var imageIndex = 1, image1, image2;
            var getNextImage = function() {
                if(imageIndex >= photoList.length) imageIndex = 0;
                image1.src = image2.src;
                $(image1).css({opacity:1.0});
                image2.src = photoList[imageIndex++];
                var TM = window.setTimeout(fadeOut, 3000);
            }
            var fadeOut = function() {
                $(image1).fadeOut(3000, getNextImage);
            }
/* et lorsque le document est prêt: */
            $(function () {
                image1 = $('#image1')[0];
                image2 = $('#image2')[0];
                image2.src = photoList[0];
                getNextImage(); 
            })

Ce qui ne marche pas:
j'ai bien un fadeOut entre la première image et la seconde, mais ensuite les photos s'enchaînent par remplacement instantané.
C'est comme si

$(image1).css({opacity:1.0});

n'avait aucun effet:
la première image partirait bien par défaut de opacity = 100%, le fadeOut la mettrait à 0, et ensuite la première image serait toujours invisible et on verrait les changements instantanés de la deuxième image.
La question est donc:comment remettre l'opacité à 100% sur image1?

Merci de votre aide
Modifié par PapyJP (27 Feb 2015 - 11:07)

En fait jQuery marque l'image comme "display:none;" à la fin du fadeOut, et l'opacité est remise automatiquement à 1.
Si on écrit

image1.style.display = '';

ça fonctionne.

Bonjour.

Le problème (enfin je pense dans ton cas), est que le fadeOut() finit l'animation par un display:none.
Donc si tu joue uniquement avec les opacités, essaie plutôt fadeTo().

EDIT: tu m'as pris de cours
Modifié par SolidSnake (27 Feb 2015 - 11:46)

Merci SolidSnake

C'est le genre de choses qu'il suffit de savoir une fois et qu'on n'oublie pas, mais ce n'est pas évident a priori.
J'ai trouvé en mettant un point d'arrêt avec FireBug et en regardant en détail ce que jQuery avait fait subir à ma pauvre image

Il en va de même avec les méthode sliding (slideUp, slideDown) ou de base (Hide et Show), mais comme je l'ai précisé, tu peux tester le fadeTo() qui ne te proposera normalement pas de soucis
Modifié par SolidSnake (27 Feb 2015 - 12:07)