Pause des events pendant animation jquery [Résolu]

[Spatule]

Bonjour,

J'essaye en vain d'éliminer un comportement non souhaité dans mon petit script jquery.
Voici le bout de code (je débute, si y a des trucs pas logique c'est normal ):

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
var delay_time = 500;
var current_div;
var div_id = ['#accueil','#realisations','#evenements','#contact'];
var button_id = ['#accueil_button','#realisations_button','#evenements_button','#contact_button'];
 
function hideDiv(id) {$(id).fadeOut(delay_time);} // $(id).hide(delay_time);
function showDiv(id) {$(id).delay(delay_time).fadeIn(delay_time);} // $(id).delay(delay_time).show(delay_time);
 
function initMenu() {
	current_div = div_id[0];
	for (var i = 1, c = div_id.length; i < c; i++) {
		$(div_id[i]).css('display','none');
	}
}
 
$(document).ready(function(){
 
	initMenu();
 
	$(button_id[0]).click(function () {
		if (current_div != div_id[0]) {
			hideDiv(current_div);
			current_div = div_id[0];
			showDiv(current_div);
		}
	});
	$(button_id[1]).click(function () {
		if (current_div != div_id[1]) {
			hideDiv(current_div);
			current_div = div_id[1];
			showDiv(current_div);
		}
	});
	$(button_id[2]).click(function () {
		if (current_div != div_id[2]) {
			hideDiv(current_div);
			current_div = div_id[2];
			showDiv(current_div);
		}
	}); 
	$(button_id[3]).click(function () {
		if (current_div != div_id[3]) {
			hideDiv(current_div);
			current_div = div_id[3];
			showDiv(current_div);
		}
	});
});

L’idée est simplement de créer une sorte de menu avec 4 items (button_id) et chaque item fait apparaitre sa div respective (div_id). Les différentes div doivent apparaitre au même endroit et surtout jamais simultanément ! (d'ou la gymnastique un peu tordu avec current_div...).
Quand on switch de div, il y a un petit fade effect temporisé.
Et c'est là que se situe mon problème, car si je clique sur un autre menu item pendant la temporisation alors les div vont se superposer...
Si delay_time est inférieur à 300ms ce n'est pas trop gênant, mais au delà ça craint à max

Comment je peux faire donc pour "mettre en pause" le gestionnaire d’événement pendant mes fonctions onclick ?..
J'ai déjà essayé en mettant des variables flag mais ça donne rien... J'ai essayé aussi avec unbind() mais après mes event click sont supprimés définitivement.. bref je tourne en rond là, si quelqu'un peut m'éclairer

[Macmillenium]

http://api.jquery.com/stop ?

[Spatule]

merci, je pense que stop() était la fonction qui me manquait

je sais pas si ce que j'ai fait est optimal mais en faisant comme ci dessous ça marche beaucoup mieux !!

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
32
33
34
35
36
37
38
39
40
41
42
43
44
 
...
 
function stopEvent(id) {$(id).stop(true,true);} // <= NEW
 
...
 
$(document).ready(function(){
 
	initMenu();
 
	$(button_id[0]).click(function () {
		if (current_div != div_id[0]) {
			stopEvent(current_div); // <= NEW
			hideDiv(current_div);
			current_div = div_id[0];
			showDiv(current_div);
		}
	});
 
	$(button_id[1]).click(function () {
		if (current_div != div_id[1]) {
			stopEvent(current_div); // <= NEW
			hideDiv(current_div);
			current_div = div_id[1];
			showDiv(current_div);
		}
	});
	$(button_id[2]).click(function () {
		if (current_div != div_id[2]) {
			stopEvent(current_div); // <= NEW
			hideDiv(current_div);
			current_div = div_id[2];
			showDiv(current_div);
		}
	}); 
	$(button_id[3]).click(function () {
		if (current_div != div_id[3]) {
			stopEvent(current_div); // <= NEW
			hideDiv(current_div);
			current_div = div_id[3];
			showDiv(current_div);
		}
	});

me reste plus qu'à "looper" tout ça et ça devrait être pas trop mal...

merci encore