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.

21/01/2012, 07h30	#3
PIEPLU Membre du Club Inscription : avril 2003 Messages : 299 Détails du profil Informations personnelles : Âge : 30 Informations forums : Inscription : avril 2003 Messages : 299 Points : 40 Points : 40	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 __________________ Vincent Pieplu Développeur Site Internet
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email