Temporisation et fermeture

**topolino** · 03/09/2009, 11h53

Bonjour,

Alors actuelle dans mon EndRequestHandler, je fais apparaitre un pop sous forme de div. a la fin de mon traitement.
Comment puis je la refermer apres un certain laps de tps ?

Merci

**danielhagnoul** · 04/09/2009, 01h06

Bonsoir.

Exemple :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
    <script type="text/javascript">
        $(document).ready(function(){
            // http://james.padolsey.com/javascript/jquery-delay-plugin/
            $.fn.delay = function(time, callback){
                jQuery.fx.step.delay = function(){};
                return this.animate({delay:1}, time, callback);
            }
 
            $("#maDiv").delay(2000, function(){
                $(this).css("display","none");
            });
        });
    </script>

**dan44** · 07/09/2009, 14h57

je cherche comment rajouter une tempo avant fermeture du menu,
lors de la désélection de celui-ci, ceci afin de faciliter la navigation,
note : désolé, si ce pb ne correspond pas tout à fait au sujet de discussion précédent mais le point commun est la gestion des time out ,
pour info, j'ai introduit une tempo pour l'ouverture du menu , via le code js suivant : (mais ca ne fonctionne pas, tj des pb de déselection du menu lors d'un aller-retour rapide de la souris)

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
 
[var obj = null;
 
function checkHover() {//fonction de disparition
	if (obj) {
		obj.children('ul').fadeOut('fast');	
	} //if
} //checkHover
 
$(document).ready(function() {
	$('#Nav > li').hover(function() {
		if (obj) {//si l'objet est présent, il est déroulé, donc on le fait disparaitre
			obj.children('ul').fadeOut('fast');
			obj = null;
		} //sinon, on le fait apparaitre lorsque l'on passe la souris dessus
 
		$(this).children('ul').fadeIn('fast');
 
	}, function() { //on fait disparaitre si on est plus sur l'élément au bout de 0 seconde
		obj = $(this);
		setTimeout(
			"checkHover()",
			0); // si vous souhaitez retarder la disparition, c'est ici
	}), $('.Menu > li').hover(function(){//fonction qui fait "clignoter une fois" l'entrée du menu au passage de la souris
		$(this).fadeTo('slow', 0.3);
		$(this).fadeTo('normal', 1);});
});

merci d'avance
dan

**danielhagnoul** · 07/09/2009, 19h41

Bonsoir.

La première fois vous me parliez de refermer une div et maintenant d'une fonction hover() !

Exemple :

Code :

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

1
2
3
4
5
6
7
8
9
 
$("#nav li").hover(
    function(){
        $(this).find('ul:first').show(800);
    },
    function(){
        $(this).find('ul:first').hide(800);
    }
);

Pour les effets, voir : http://docs.jquery.com/Effects

**nicolas2603** · 08/09/2009, 16h14

Bonjour, je me permets de poster une question à la suite de cette discussion puisque je cherche un peu à obtenir un effet tel que décrit plus haut, à savoir, afficher mes menus avec un effet de fade lors du passage de la souris sur le menu parent.

Les deux exemples fonctionnent, mais je n'ai pas réussi à faire en sorte que le délai agisse sur le hover. De quelle manière peut-on y arriver ?

J'ai tenté ceci, mais sans succès :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
$.fn.delay = function(time, callback){
	jQuery.fx.step.delay = function(){};
	return this.animate({delay:1}, time, callback);
}
 
$("#menu li").delay(2000, function(){
	$("#menu li").hover(
		function(){ $(this).find('ul:first').fadeIn(800); },
    	        function(){ $(this).find('ul:first').fadeOut(800); }
	});
);

Merci d'avance.

**nicolas2603** · 08/09/2009, 17h00

En fait j'ai réussi à temporiser ma fermeture comme ceci :

Code :

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

1
2
3
4
5
6
7
8
9
10
$.fn.delay = function(time, callback){
	jQuery.fx.step.delay = function(){};
	return this.animate({delay:1}, time, callback);
}
 
 
$("#menu li").hover(
	function(){	$(this).find('ul:first').fadeIn(800); },
	function(){	$(this).delay(2000, function(){	$(this).find('ul:first').fadeOut(800); })}
);

sauf que lorsque ma souris sort du hover puis revient dessus avant que le menu ne disparaisse, il disparait quand même !
Comment faire pour remettre à 0 le delay lorsque la souris revient sur les ul ?

**danielhagnoul** · 08/09/2009, 21h58

Bonsoir.

hover() étant l'équivalent d'un mousenter() plus un mouseleave() il est normal que les deux actions se produisent l'une après l'autre.
Avec hover() on ne peut réaliser que des animations aller-retour.

Exemple :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Author" content="Daniel Hagnoul" />
    <title>Page type</title>
    <style type="text/css">
        body {
            background-color:#FFFFFF;
            color:#000000;
            font-family:Arial, Helvetica, sans-serif;
            font-size:medium;
            font-style:normal;
            font-weight:normal;
            line-height:normal;
            letter-spacing:normal;
        }
        h1,h2,h3,h4,h5 {
            font-family:"Times New Roman", Times, serif;
        }
        div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
            margin:0px;
            padding:0px;
        }
        p {
            padding:6px;
        }
        ul,ol,dl {
            list-style:none;
            padding-left:6px;
            padding-top:6px;
        }
        li {
            padding-bottom:6px;
        }
        ul.exemple {
            width:300px;
            height:auto;
            border:1px solid #0000FF;
            margin:12px;
            padding:6px;
        }
    </style>
    <script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
 
            /*
            * hover() étant l'équivalent d'un mousenter() et d'un mouseleave()
            * il est normal que les deux actions se produisent l'une après l'autre.
            *
            * Avec hover() on ne peut réaliser que des animations aller-retour.
            */
            $("ul.exemple li:eq(0)").hover(
                function(){
                    $(this).fadeTo(2000, 1.0);
 
                    // Firebug
                    //console.log("Événement mouseenter");
                },
                function(){
                    $(this).fadeTo(2000, 0.2);
 
                    // Firebug
                    //console.log("Événement mouseleave");
                }
            );
 
            // CSS opacity n'existe pas sous IE
            $("ul.exemple li:eq(0)").fadeTo(1, 0.2);
 
        });
    </script>
</head>
<body>
    <div id="conteneur">
        <ul class="exemple">
            <li>
                <p>
                    Aliquam erat volutpat. Phasellus cursus tempor augue. Morbi eu nisi et mi interdum lobortis. Nullam faucibus, enim quis ultricies imperdiet, ante leo lacinia nisi, vitae malesuada enim orci id dolor. Maecenas volutpat porta turpis. Ut nibh massa, luctus commodo, cursus eu, ornare eu, nulla. In vitae felis in ligula tincidunt suscipit. Mauris fermentum, magna nec viverra tristique, magna purus scelerisque ipsum, vel accumsan enim dui eu eros. In hac habitasse platea dictumst. Praesent aliquet ipsum sit amet tellus. Vivamus elit est, rhoncus in, iaculis vel, pellentesque sit amet, quam. Nunc id libero eget dolor molestie hendrerit. Etiam odio lectus, venenatis ut, porta eu, luctus ut, libero. Morbi lacinia, urna in tristique fringilla, urna libero convallis velit, nec auctor neque nulla eget ante. Sed elementum.
                </p>
            </li>
            <li>
                <p>
                    Sed sed erat vitae tortor lobortis hendrerit. Donec a diam quis neque dignissim feugiat. Vivamus eu eros. Maecenas vulputate accumsan leo. Proin et elit. Fusce est. Vestibulum consectetur dui sed dolor. Curabitur ante tortor, ultricies quis, ultrices ac, convallis sed, neque. Aliquam pellentesque, augue sed pretium sodales, massa diam auctor metus, sed feugiat nunc quam ac justo. Quisque mattis, nisi at venenatis scelerisque, lectus tortor rutrum quam, at venenatis orci dui rhoncus massa. Nullam imperdiet, eros non auctor ornare, nisi lacus dictum mauris, ut pretium tellus mauris id nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut luctus, velit vel tristique faucibus, libero quam rutrum nibh, eget scelerisque urna odio vel sem. Mauris in enim.
                </p>
            </li>
        </ul>
        <div id="affiche"></div>
    </div>
</body>
</html>

La temporisation ajoutera un délai avant l'animation mais ne changera pas l'animation.

**nicolas2603** · 09/09/2009, 08h59

Ok je comprends. Donc peut-être vaut-il mieux que je passe par un système de mouseover et de mouseout ? Dans ce cas là, ce serait possible de réinitialiser le delay lors du mouseover, afin que l'utilisateur sortant puis revenant sur le sous-menu, n'ai pas à refaire tout le déroulement du menu pour réaccéder à cette partie ?

**lemirandais** · 09/09/2009, 09h06

Oui tu peux réintialisé la durée, je l'ai fait au niveau d'un slider de mon blog: http://leknoppix.fr. SI tu regardes lorsqu'un visiteur clique sur le slider au niveau d'une flèche, la variable de temps qui me permet de passer automatiquement de slide en slide est remise à 0.
Je t'invite à consulter ce script javascript: http://leknoppix.fr/javascript/slider.js

Bon courage.

lemirandais

**nicolas2603** · 09/09/2009, 09h27

Je me penche sur ton script fort intéressant. Si je comprends bien, tu définies un setInterval avec un temps d'attente entre les animations, et lorsqu'un utilisateur clique sur l'une des flèches, tu réinitialises avec un clearInterval. C'est bien cette partie là qui permet de bloquer la suite des évènements ?

**dan44** · 09/09/2009, 13h15

bonjour,
alors comment faire, pour rajouter un timeout sur déselection du menu ?
si j'ai bien compris il ne faut pas utiliser hover, ce qui expliquerait les pbs que je rencontre
merci d'avance
daniel
ci-dessous, mon code, un timeout de 5000 , ne résoud pas le pb, d'aller-retour de la souris, ca fait n'importe quoi, avec IE7,

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
 
var obj = null;
 
function checkHover() {//fonction de disparition
	if (obj) {
		obj.children('ul').fadeOut('fast');	
	} //if
} //checkHover
 
$(document).ready(function() {
	$('#Nav > li').hover(function() {
		if (obj) {//si l'objet est présent, il est déroulé, donc on le fait disparaitre
			obj.children('ul').fadeOut('fast');
			obj = null;
		} //sinon, on le fait apparaitre lorsque l'on passe la souris dessus
 
		$(this).children('ul').fadeIn('fast');
 
	}, function() { //on fait disparaitre si on est plus sur l'élément au bout de 0 seconde
		obj = $(this);
		setTimeout(
			"checkHover()",
			0); // si vous souhaitez retarder la disparition, c'est ici
	}), $('.Menu > li').hover(function(){//fonction qui fait "clignoter une fois" l'entrée du menu au passage de la souris
		$(this).fadeTo('slow', 0.3);
		$(this).fadeTo('normal', 1);});
});

**dan44** · 09/09/2009, 18h57

bonjour,
est-ce que tu as résolu le pb , et comment ?
pour info, j'ai remplacé hover par mouseover et mouseout, ca ne fonctionne pas mieux, c'est meme pire,
daniel

**nicolas2603** · 09/09/2009, 20h12

Bonsoir, pour ma part non le problème n'est pas résolu, j'ai essayé d'associer un setInterval à mes mouseover et mouseout, mais sans succès. Et effectivement cela fonctionne moins bien que le Hover !

**nicolas2603** · 10/09/2009, 13h52

Bonjour, alors voici l'évolution de la chose. Mon code est actuellement ceci :

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
var MyInterval = 0;
$("#menu li").mouseover(
	function(){
		clearInterval(MyInterval);
		$(this).find('ul:first').fadeIn("normal");
	}
);
 
function disappear(){
	$("#menu li").find('ul:first').fadeOut("normal");
}
 
$("#menu li").mouseout(
	function(){ MyInterval = setInterval(function() { disappear(); }, 2000); }
);

Mais cela ne fonctionne pas correctement :
*) au survol de <ul> le premier <li> apparaît, mais au survol du <ul><li><ul>, tout disparait. Et ensuite au survol, tout disparait sans délai.
*) si je passe d'un <ul> à un autre, le premier ne s'efface pas.

Où est-ce que ça coince ?

**dan44** · 11/09/2009, 09h15

bonjour,
moi aussi j'ai bcp de pb avec les mouveover et out,
est-ce que tu as essayé avec le code que j'utilise, (hover au lieu de mousover), en principe ca marche mieux, je pense que ca devrait finir par fonctionner en rajoutant des conditions dans le code,
en effet le pb apparait lorsque je relache un menu et le resélectionne aussitot, le vavigateur perd les pédales il ne sait plus s'il faut fermer, ouvrir le menu,
sinon lorsqu'on navigue sans aller-retour ds le meme menu, le timeout fonctionne bien, je pense qu'il faudrait interdire le fadeOut (fermeture du menu) lorsqu'on revient dans le meme menu, j'ai essayé de rajouter ceci

Code :

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

1
2
3
4
5
 
// si objet en atttente de tempo et pas menu deja selectionné
if (($this) != obj.children('ul') && obj) {//si l'objet est présent, il est déroulé, donc on le fait disparaitre
			obj.children('ul').fadeOut('fast');
			obj = null;

sachant que obj contient la ref du menu en attente d''échéance de timeout, mais ca ne marche pas, on continue d'exécuter le fadeOut.

j'ai donc abandonné, mais je suis certain que qq a surement résolu ce pb qq part sur la planète,
sinon, j'utilise dans un autre menu du pur javascript qui fonctionne correctement (le code est nettement plus étoffé que celui-ci) mais malheureusement, je n'arrive pas à faire fonctinner ces javascripts lorsque le menu principal est à l'horizontale, ca fonctionne correctement avec des menus verticaux, c'est la raison pour laquelle je me suis tourné vers JQuery, qui me satisfait hormis la difficulté de navigation sans tempo (on pert facilment la sélection et ca énerve !)

**nicolas2603** · 11/09/2009, 11h25

Pour le moment j'utilise une solution de rechange qui fonctionne presque parfaitement:

Code :

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

1
2
3
4
5
6
7
$("#menu li").mouseover( function(){
	$(this).children("ul").fadeIn("normal");
	$(this).prev().children("ul").fadeOut("normal");
	$(this).siblings().children("ul").fadeOut("normal");
});
 
$("body").click(function(){	$("#menu ul").fadeOut("normal"); });

Mais je continue à essayer de coder l'effet décrit plus haut. C'est quand même étonnant effectivement de ne pas trouver une source identique ...

**dan44** · 15/09/2009, 09h31

bonjour,

comme l'ajout d'un timeout à la fermeture du menu ne fonctionne pas, j'abandonne la solution Jquery, et me tourne vers une autre solution que j'ai réussi à faire fonctionner finalement meme avec un menu principal horizontal,
pour ceux qui sont intéressé voir les packages horizontaux et verticaux sous
www.dosimple.ch , cliquer sur menus déroulants, etc
ca fonctionne correctement, avec IE, ptit pb de cadrage de sous-menu avec FF, à suivre donc

Temporisation et fermeture

jQuery

Discussions similaires

Partager

Partager