Discussion :

[Alma9]

Bonjour,

Sur une page web j'ai 3 boutons, "Play" permet de faire disparaitre les images présentent une par une, "Stop" arrête le processus et "Return" les fait apparaitrent à partir de la dernière image qui à disparu. Play et Stop fonctionne bien mais pas Return pourtant je suis certain que ça avait fonctionné, enfin bref, voici le code si quelqu'un peut m'aider ce serait cool, merci.

Code :

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

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
27
28
29
$(document).ready(function()
{
 
    $(function()
    {
        $("#play").click(function()
        {
            $("img").first().fadeOut(2000, function suivante()
            {
                $(this).next("img").fadeOut(3000, suivante);
            });
        });
 
        $("#return").click(function()
        {
            $("img").last().fadeIn(2000, function show()
            {
                $(this).prev("img").fadeIn(2000, show);
            });
        });
 
        $("#stop").click(function()
        {
            $("img").stop();
        });
 
    });
 
});

[Watilin]

Les expressions $("img").first() et $("img").last() dépendent de ta structure HTML. Garde à l’esprit que le sélecteur $("img") trouve toutes les images de la page. Si les images n’ont pas toutes le même parent, les méthodes .prev() et .next() ne fonctionneront pas comme tu l’attends.

De plus, je ne me souviens plus si jQuery gère ça tout seul ou pas, mais tu pourrais avoir des conflits d’animation si tu cliques rapidement sur play après return, et réciproquement. Tu devras peut-être prévoir d’annuler les animations en cours avant d’en lancer une nouvelle.

[Alma9]

Merci pour ta réponse, oui toutes les images ont bien le même parent. Je suis retombé sur une sauvegarde où le code fonctionne complétement et il est identique, depuis je l'ai un peut étoffé mais même quand j’enlève ce que j'ai ajouté rien à faire ça veut pas, je comprends pas ce qui bloque. Je mets le code final au cas où.

Code :

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

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
$(document).ready(function()
{
    $(function()
    {
        $("#play").click(function()
        {
            $("img").first().fadeOut(2000, function suivante()
            {
                $(this).next("img").fadeOut(3000, suivante);
            });
        });
        $("#return").click(function()
        {
            $("img").last().fadeIn(2000, function voir()
            {
                $(this).prev("img").fadeIn(2000, voir);
            });
        });
        $("#stop").click(function()
        {
            $("img").stop();
        });
        $("#taille1").click(function()
        {
            $("img").css("width", "15%");
            $("img").mouseover(function()
            {
                $(this).css("width", "70%"),
                $("img").mouseleave(function()
                {
                    $(this).css("width", "15%");
                })
            });
        });
         $("#taille2").click(function()
        {
            $("img").css("width", "25%");
            $("img").mouseover(function()
            {
                $(this).css("width", "70%"),
                $("img").mouseleave(function()
                {
                    $(this).css("width", "25%");
                })
            });
        });
         $("#taille3").click(function()
        {
            $("img").css("width", "40%");
            $("img").mouseover(function()
            {
                $(this).css("width", "70%"),
                $("img").mouseleave(function()
                {
                    $(this).css("width", "40%");
                })
            });
        });
    });
    let button = true;
        function ordre()
        {
            if (button)
            {
                $("img").css({position: "static", width: "15%"});
                $("img").mouseover(function()
                {
                    $(this).css("width", "70%"),
                    $("img").mouseleave(function()
                    {
                        $(this).css("width", "15%");
                    })
                });
            }
            else
            {
                $("img").css({position: "absolute", width: "25%"});
                $("img").mouseover(function()
                {
                    $(this).css("width", "70%"),
                    $("img").mouseleave(function()
                    {
                        $(this).css("width", "25%");
                    })
                });
            }
                button =! button;
        }
        $("#taille4").click(function()
            {
                ordre();
            });
});

[Alma9]

Après quelques recherches, lorsque je remplace le HTML de la version antérieur qui fonctionne avec la dernière, le return de marche plus donc c'est dans le HTML que ça se passe, pourtant je n'apporte aucune modification à la gestion des boutons, c'est exactement la même. Je vais y regarder de plus prés. Je ne suis pas un codeur donc si tu vois quelque chose de bizarre dans mon code n'hésite pas, merci.

[Alma9]

J'ai trouvé, et tu m'avais donné la solution en plus, en fait par la suite j'ajoute dans le footer 2 images et c'est la que ça coince. Avec une sélection plus spécifique des images dans le code, le problème semble résolu.