1 Dernière modification par Xavier (29-03-2017 13:19:32)

Sujet : fadeToggle : question de débutant

Bonjour,
je suis relativement débutant en développement, et je m'intéresse à jQuery.
En fouinant sur le site W3school , j'ai trouvé un bout de code qui correspond à ce que je cherchais. Il s'agit d'un joli menu fait avec la fonction fadeToggle . Le problème est que le toggle est joli dans un sens, mais pas dans l'autre .... Ce qui est naturel, vu que les vitesses en millisecondes sont les mêmes sur les mêmes DIV à l'aller comme au retour. Voici le code :

<script>
                $(document).ready(function(){
                    $("button").click(function(){
                        $("#div1").fadeToggle();
                        $("#div2").fadeToggle("slow");
                        $("#div3").fadeToggle(500);
                        $("#div4").fadeToggle(900);
                        $("#div5").fadeToggle(1300);
                        $("#div6").fadeToggle(1700);
                        $("#div7").fadeToggle(2100);
                        $("#div8").fadeToggle(2500);
                        $("#div9").fadeToggle(2900);
                        });
                    });
        </script> 

Au 2e click, la div1 est évidemment celle qui se referme en premier. Le résultat est donc moche: le menu se referme en paliers. Savez-vous comment arranger ça ?

A savoir que je bosse avec Bootstrap , et qu'il existe certainement un moyen d'avoir la même chose en "customisant" une classe Bootstrap. Disons que j'ai plutôt envie d'apprendre jQuery ...

Merci !

2

Re : fadeToggle : question de débutant

Salut

<script>
                $(document).ready(function(){
                    $("button").click(function(){
                        $("#div1").fadeToggle();
                        $("#div2").fadeToggle("slow");
                        $("#div3").fadeToggle(500);
                        $("#div4").fadeToggle(900);
                        $("#div5").fadeToggle(1300);
                        $("#div6").fadeToggle(1700);
                        $("#div7").fadeToggle(2100);
                        $("#div8").fadeToggle(2500);
                        $("#div9").fadeToggle(2900);
                        });
                    });
        </script>

j'ai remplacé " $("button").click(function(){"  par  $("button").one(function(){