Discussion :

[Federico_muy_bien]

Salut !!!

Alors je vous avoue que j'ai eu du mal à trouver le titre du sujet et je pense que c'est pour ça que je n'ai pas pu trouver de réponse, c'est parceque je ne vois pas comment décrire mon probléme en quelque mots.

Je me lance :
J'ai une application Web avec un menu horizontal (ul) contenant les liens vers les differentes parties de l'application (li --> a)

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<!-- ligne des onglets -->
	<ul class="onglets">
 
		<li class="onglets">
			<a class="onglets" onclick="javascript:logout(); return false;" href="#">&nbsp;Logout</a>
			<em><img src="../images/lock.png" id="logout" height="25px" alt="#" /><br />Good Bye ...</em>
		</li>
 
		<li class="onglets">
			<a class="onglets" href="../php/home.php">&nbsp;Home</a>
			<em><img src="../images/home.png" id="home" height="25px" alt="#" /><br />Go to Home</em>
		</li>
        </ul>

Au survol du lien (a) une fonction javascript/JQuery est appelé. Elle fait apparaitre un genre d'infobulle personnalisée au dessus du lien avec le code du em suivant ...

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
 
<script type="text/javascript">
		$(document).ready(function(){
			$(".onglets a").hover(function() {
				$(this).next("em").animate({opacity: "show", top: "-90"}, "slow");
			}, function() {
				$(this).next("em").animate({opacity: "hide", top: "-105"}, "fast");
			});
		});
	</script>

Tout marche trés bien mais je me suis aperçu que si je survole rapidement cette zone 10 fois par exemple, la fonctio va etre exécutée 10 fois a la suite même si la souris n'est plus du tout dans cette zone ...

Donc ce que je voudrais faire c'est qu'un fois la fonction lancée elle ne soit plus "relançable" avant la fin de l'animation ...

Je ne sais pas si vous avez compris mon probléme.
Peut être arrété les listener d'evenement mais alors un survol sur un autre onglet ne sera pas pris en compte. Peut on arreter le listener que pour un objet (le li qui est est en cours d'animation ???) ?

Merci d'avance !!
Muy Bien

[Federico_muy_bien]

bon alors je me suis surement mal exprimé.

Ce que je voudrais c'est que lors de l'éxecution de la fonction javascript elle ne soit pas "ré-appelable" pour le même objet (ici l'id de mon <a>).

Il y aurait-il une fonction existante permettant de tester l'éxecution d'une fonction pour un objet ? Ou un bout de code vérifiant l'id du a pour lequel la fonction est en cours d'éxecution ?

J'espere m'être mieux exprimé. Je cherche de mon coté mais je ne trouve pas. Je pense pourtant que c'est d'une grande utilité ....

[le_chomeur]

il faut que tu ajoutes un boolean , permettant de savoir si l'action est en cours sur l'objet ( exemeple :

objet.action = true ; // dès que tu lance l'anim

puis une condition AVANT de lancer l'anim :

si action est a false on la lance

Code :

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

1
2
if(objet.action == false){
}

et tu remet action a false une fois terminé

[Federico_muy_bien]

Merci LeChomeur
Je voyais tellement compliqué que je pensais pas à un truc simple ...


mais ça a beau être simple je n'arrive pas à le mettre en place ... re
voici le code qui marche mais qui repete l'action

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
	<script type="text/javascript">
                $(document).ready(function(){
                                $(".onglets a").hover(function() {
                                                $(this).next("em").animate({opacity: "show", top: "-90"}, "slow");
                                                }, function() {
                                                $(this).next("em").animate({opacity: "hide", top: "-105"}, "fast");
                                                });
                                                
                        }
                });
        </script>

j'ai essayé de faire ça mais. Je declare un var unique (donc normalement aucune autre li ne peut executer la fonction en meme temps. Je ferai avec l'id specifique quand j'aurai compris le fonctionnement)

Code html :

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
 
	<script type="text/javascript">
                $(document).ready(function(){
                        var action ;
                                $(".onglets a").hover(function() {
                                        if(action == false){
                                                action = true ;
                                                $(this).next("em").animate({opacity: "show", top: "-90"}, "slow");
                                                }, function() {
                                                $(this).next("em").animate({opacity: "hide", top: "-105"}, "fast");
                                                });
                                                action = false ;
                                        }
                        }
                });
        </script>

Du coup la fonction est jamais lancée ...

[Niki59]

Essaye ça pour voir, je ne suis pas du tout sûr du résultat :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
		$(document).ready(function(){
			var action ;
				$(".onglets a").hover(function() {
					if(action != true){
						$(this).next("em").animate({opacity: "show", top: "-90"}, "slow");
						}, function() {
						$(this).next("em").animate({opacity: "hide", top: "-105"}, "fast");
						action = true ;
						});
 
					}
			}
		});

[le_chomeur]

arf c du jquery ( je rame avec ça ^^ )

mais l'idée est la

[Federico_muy_bien]

Essaye ça pour voir, je ne suis pas du tout sûr du résultat :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
		$(document).ready(function(){
			var action ;
				$(".onglets a").hover(function() {
					if(action != true){
						$(this).next("em").animate({opacity: "show", top: "-90"}, "slow");
						}, function() {
						$(this).next("em").animate({opacity: "hide", top: "-105"}, "fast");
						action = true ;
						});
						
					}
			}
		});

Merci mais ça ne marche pas ... je viens de me rendre compte que le if action se termine au niveau de function .. (voir plus haut en rouge ...)
En fait c'est du JQuery. Le code se compose comme ça :
document.fonction({fonction1})
avec function1 = hover.({function1},{function2})
avec function2 qui se declenche quand function1 est finie ...

du coup je vois pas mettre le if (action != true) ...