Temporisation et fermeture

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

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, 02h06

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, 15h57

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, 20h41

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, 17h14

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, 18h00

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, 22h58

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.

Temporisation et fermeture

jQuery

Vue hybride

Discussions similaires

Partager

Partager