Fermeture après delai

**PIEPLU** · 20/01/2012, 22h40

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 :

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

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

**utopman** · 20/01/2012, 23h40

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 :

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
 
$(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

**PIEPLU** · 21/01/2012, 07h30

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

**utopman** · 21/01/2012, 10h38

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 :

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
<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.

Fermeture après delai

JavaScript

Vue hybride

Discussions similaires

Partager

Partager