Fermeture après delai

Version imprimable

Bonsoir,

En jquery, j'ai fait un menu où lorsque je passe dessus il s'ouvre, et dès que je le quitte, il se referme. Malheureusement, il se referme trop vite.

Voici déjà ce que j'ai fait :
Code:

1 2 3 4 $(document).ready(function(){$("#button_cat").mouseenter(function(){$("#listecat").toggleClass("visibility")})}); $(document).ready(function(){$("#listecat").mouseenter(function(){$("#listecat").toggleClass("visibility")})}); $(document).ready(function(){$("#button_cat").mouseleave(function(){$("#listecat").removeClass("visibility")})}); $(document).ready(function(){$("#listecat").mouseleave(function(){$("#listecat").removeClass("visibility")})});
J'aimerais que l'ouverture et la fermeture se fasse après qqs secondes de façons lente.

Auriez-vous une idée ?

Merci

Bonjour Pieplu

tout d'abord, je te conseille de mettre tous tes écouteurs dans la meme fonction ready (elle ne devrait être executée qu'une fois. Par ailleurs, ca peut être agréable de relire le code s'il est un peu aéré.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 $(document).ready( function(){ $("#button_cat").mouseenter( function(){ $("#listecat").toggleClass("visibility"); } ); $("#listecat").mouseenter( function(){ $(this).toggleClass("visibility"); } ); } );
note que j'ai utlisé l'opérateur this pour référencer le #listecat . $(this) est l'élément #listecat, car là où je l'utilise est le contexte direct de la fonction annonyme.
pour le toggleClass lent , tu peux voir le .animate qui prend en parametre une durée , ou plus simplement slideUp / slideDown ou encore fadeIn /fadeOut
(voir la doc avec de bons exemples sur le site JQuery)

cordialement :D

21/01/2012, 07h30
PIEPLU

J'ai pourtant essayé les slide et fade mais ça n'a rien donné. Pourrais tu me montrer comment je les integre dans mon code ?
Merci de ton aide

Bonjour vincent,

j'ai fait ce code pour te montrer comment gérer ca avec le animate, méthode qui permet une plus grande souplesse dans la transformation de ton élément.

Code:

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
<html>
    <head>
        <title></title>
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <style>
            li{width:200px;background-color:#555;color:#eee;height:400px;float:left;}
        </style>
        <script>
            $(document).ready(
                function()
                {
                  $('.myMenu li').click(
                    function()
                    {
                        $('.myMenu li').animate({'height':400},250);
                        $(this).animate({'height':40},250);
                    }
                  );
                }
            );
        </script>
    </head>
 
    <body>
        <ul class="myMenu">
            <li>element 1</li>
            <li>element 2</li>
            <li>element 3</li>                               
        </ul>
    </body>
</html>

En espérant que ca t'aide.