affiche après un temps X – débutant

[SuperArbre]

Bonjour à tous,

J'ai essayé de faire une liste déroulante en JS et j'ai quelques problèmes pour gérer son comportement… (je suis malheureusement débutant)
Ce code fonctionne, la liste apparaît correctement au passage de la souris.

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
 
	$("div.photo a").mouseover(function(){
	$(this).parent().children("dl").clone().appendTo("#auteur");
	$("#auteur>dl>dt:first-child").remove();
	$("#auteur>dl>dd:first-child").remove();
		 var liste=$("#auteur>dl>dt:nth-child(7)");
		 liste.css("border-top","1px solid gray");
 		 liste.css("margin-top","30px");
		 liste.css("margin-bottom","10px");
		 liste.css("color","rgb(240,135,0)");
 		 liste.css("font-size","13px");
	$("#auteur>dl").slideToggle("normal");  
	});
 
	var auteur=$("#auteur");	
	var time=1000;
	var souris=$("div.photo a");
 
	function enrouler(){
		$("#auteur>dl").slideUp();
	}
 
 
	souris.mouseout(function(){
	 setTimeout(enrouler, time);
	});

Hors, je voudrais faire une fonction de cette liste, puis lui demander de s'afficher uniquement si l'utilisateur reste 5 sec sur div.photo a!

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
 
	function derouler(){
	$("div.photo a").mouseover(function(){
	$(this).parent().children("dl").clone().appendTo("#auteur");
	$("#auteur>dl>dt:first-child").remove();
	$("#auteur>dl>dd:first-child").remove();
		 var liste=$("#auteur>dl>dt:nth-child(7)");
		 liste.css("border-top","1px solid gray");
 		 liste.css("margin-top","30px");
		 liste.css("margin-bottom","10px");
		 liste.css("color","rgb(240,135,0)");
 		 liste.css("font-size","13px");
	$("#auteur>dl").slideToggle("normal");  
	});
	}
 
	var auteur=$("#auteur");	
	var time=1000;
	var souris=$("div.photo a");
 
	function enrouler(){
		$("#auteur>dl").slideUp();
	}
 
	souris.mouseover(function(){
	 setTimeout(derouler, time);
	});
 
	souris.mouseout(function(){
	 setTimeout(enrouler, time);
	});

Merci à tous pour votre lecture, si quelqu'un peut me donner un coup de pouce c'est très sympa!

Merci encore!
meilleures salutations.

[danielhagnoul]

Bonsoir

Il ne faut pas confondre gestion d'événement et appel de fonction. L'événement se produit et se gère indépendamment des appels de fonction. Mais vous pouvez provoquer un événement, par un : $("div.photo a").mouseover();.

[SuperArbre]

Hello,

merci beaucoup pour ta réponse.

Si j'ai bien compris, le fait que dans ma fonction "derouler" il se trouve un .mouseover est une erreur?

En fait cette fonction ne marche pas et je peine à trouver l'erreur(s)…

Très bonne journée et merci.
Meilleures salutations.

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
 
	var liste=$("#auteur>dl>dt:nth-child(7)");
	var auteur=$("#auteur");	
	var time=100;
	var souris=$("div.photo a");
 
 
	function derouler(){
	$(this).parent().children("dl").clone().appendTo("#auteur");
	$("#auteur>dl>dt:first-child").remove();
	$("#auteur>dl>dd:first-child").remove();
		 liste.css("border-top","1px solid gray");
 		 liste.css("margin-top","30px");
		 liste.css("margin-bottom","10px");
		 liste.css("color","rgb(240,135,0)");
 		 liste.css("font-size","13px");
	$("#auteur>dl").slideToggle("normal");  
	}
 
 
	function enrouler(){
		$("#auteur>dl").slideUp();
	}
 
	souris.mouseover(function(){
	 setTimeout(derouler, time);
	});
 
	souris.mouseout(function(){
	 setTimeout(enrouler, time);
	});