11545 sujets

JavaScript, DOM et API Web HTML5

[RESOLU] JQuery : Pourquoi "unbind()" ne fonctionne pas ?

Bonjour,
Un truc que je n'arrive pas à comprendre... et à résoudre : Comment se fait-il, dans le code ci-dessous, que la fonction jQuery "unbind()" joue bien son rôle; c'est à dire que si je survole un des [+], la fenêtre texte correspondante se ferme et "unbind()" empêche bien toute autre tentative de fermeture de cette fenêtre, alors que la fonction "bind()", sensée dans le cas présent réautoriser l'ouverture (lorsque je quitte [+]) ne donne... aucun effet ? Là, j'avoue que je planche plus qu'un peu ! Est-ce que quelqu'un aurait une suggestion ?

En vous remerciant par avance ! Smiley biggrin

Code concerné
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
   
<title>Audio</title>  
   
<script type="text/javascript" src="http://souffle56.fr/Site/1-Trouver_les_ressources/Ressources/js/jquery-1.4.2.min.js"></script>  
<script type="text/javascript" src="http://souffle56.fr/Site/1-Trouver_les_ressources/Ressources/js/jquery-ui-1.8.1.custom.min.js"></script>  
<script type='text/javascript' src="http://souffle56.fr/Site/1-Trouver_les_ressources/Ressources/js/jquery.timers.js"></script>  
<script type='text/javascript'>  
   
    function descente(el) {  
        $(el).unbind('mouseenter'); // Blocage anti-rebonds (si survol répété de l'image)  
        $(el).next('div').next(".Texte_cache").animate({  
            height:'hide'  
            },900,'easeInOutCirc',function(){$(el).bind('mouseenter',descente);}); // Annulation / Blocage anti-rebonds  
        a=1;  
    };  
    function montee(el) {  
        $(el).next('div').next(".Texte_cache").animate({  
            height:'show'  
            },900); // Annulation / Blocage anti-rebonds  
    };  
      
    $(function(){  
        $('.Bouton_plus')  
            .mouseenter(function(e){  
                descente(e.target);  
            })  
            .mouseleave(function(e){  
                montee(e.target);  
            });  
    })  
  
</script>  
   
</head>  
   
<body bgcolor="#FFFFFF">  
   
<div class="Container" style="width:400px">  
   
    <div id="bouton1" class="Bouton_plus">[+]</div>  
    <div>Mon 1er texte</div>  
    <div id="message_numero1" class="Texte_cache" style="width:375px">  
        <span class="">Je suis plutot content... Je suis plutot content... Je suis plutot content... Je suis plutot content... Je suis plutot content...   
        </span>  
    </div>  
  
    <div id="bouton2" class="Bouton_plus">[+]</div>  
    <div class="Texte" style="width:367px">Mon 2eme texte</div>  
    <div id="message_numero2" class="Texte_cache" style="width:375px">  
        <span class="">Je suis super content... Je suis super content... Je suis super content... Je suis super content... Je suis super content...   
        </span>  
    </div>  
      
    <div id="bouton3" class="Bouton_plus">[+]</div>  
    <div class="Texte" style="width:367px">Mon 2eme texte</div>  
    <div id="message_numero3" class="Texte_cache" style="width:375px">  
        <span class="">Je suis super content... Je suis super content... Je suis super content... Je suis super content... Je suis super content...   
        </span>  
    </div>  
  
</div>  
  
</body>  
</html>

Modifié par Tobie (30 May 2010 - 23:50)
+1
J'ai déjà rencontré le problème, et n'ai pas réussi à le régler via "unbind"

En fait j'ai utilisé une solution bâtarde : tester dans la fonction appelée par le "bind" si oui ou non elle doit s'exécuter.

En attendant d'avoir ta réponse, ça peut être une solution...
Merci icareo pour ta proposition ! Smiley smile
Oui, j'avais déjà envisagé ce genre d'approche, avec une fonction test plus "ordinaire"... Après, c'est vrai que ça n'allège pas le programme mais,bon, si y a pas mieux ! Smiley decu
A moins que... quelqu'un aurait une autre suggestion ?
Hello,

Alors, plusieurs points.
D'abord, tu es sur que height:'hide' et height:'show' sont des arguments valides ? Il me semble que les arguments à passer à .animate() sont des propriétés CSS, donc dans ton cas ça serait plutot display:'block'/display:'none' ou height:'150px'/height:'0px' non ?

Ensuite, quel est l'argument attendu de ta fonction descente() ? Est-ce un evenement ou est-ce l'élément cible de l'évenement ? Smiley cligne Vérifie bien ton code, je pense que tu verra où je veux en venir Smiley smile
Le unbind risque de poser plus de problème qu'autre chose.

En gros si je suis la démarche, l'event mouseenter se déclenche et la, le script unbind l'event ce qui a pour effet de supprimer le mouseenter définitivement et fin d'anim on le recréer.

En plus je pense que simple "this" remplacera aussi bien les "e.target";

Sinon pour faire simple :
Définir la taille de base du block à l'ouverture de la page.

Exemple :
height : 0 (pour fermer)
ou
height : Xpx ou auto (pour ouvert)
       
   function anim(el){
      $(el).next('div').next(".Texte_cache").stop().animate({   
                     height:"toggle"   
                 },900,'easeInOutCirc');
   }

    $(function(){   
        $('.Bouton_plus')   
            .mouseenter(function(){   
                 anim(this);
            })   
            .mouseleave(function(e){   
                 anim(this);   
            });   
    })
Merci pour vos échos...
Tymlis, Je comprends ta question, quand tu dis:
a écrit :
D'abord, tu es sur que height:'hide' et height:'show' sont des arguments valides ? Il me semble que les arguments à passer à .animate() sont des propriétés CSS, donc dans ton cas ça serait plutot display:'block'/display:'none' ou height:'150px'/height:'0px' non ?

-> Voilà ce que j'ai trouvé, comme réponse / à cela (documentation officielle):
a écrit :
In addition to numeric values, each property can take the strings 'show', 'hide', and 'toggle'. These shortcuts allow for custom hiding and showing animations that take into account the display type of the element.
Donc, à priori, la problème concernant "bind" doit se trouver ailleurs (enfin, si j'ai bien compris) !

* Sinon, pour info:
(1) Si j'utilise height:'hide' et height:'show', c'est que ça me permet d'ajuster la hauteur du bloc à celle du texte qu'elle contient (selon qu'il y a plus ou moins de texte) !
(2) Quand au pourquoi je bloque momentanément l'évènement "mouseenter"... Tout simplement pour éviter un effet "rebond" propre aux "mises en mémoire" des évènements par jQuery (si on survole rapidement plusieurs fois [+], la fenêtre s'ouvre et se referme après autant de fois) !

Euh, sinon, quand tu mets:
a écrit :
Ensuite, quel est l'argument attendu de ta fonction descente() ? Est-ce un evenement ou est-ce l'élément cible de l'évenement ? cligne Vérifie bien ton code, je pense que tu verra où je veux en venir smile
-> Désolé, je n'ai pas compris !
Tout ce que j'ai pu repérer (mais je suis plutôt néophyte, coté javascript), c'est que:
* L'appel de la fonction "descente(e.target);" récupère comme argument l'élément cible de l'évenement (div, id et class)
-> La fonction "descente(el)" récupère bien cette localisation comme argument et le traite en conséquence ! Du fait, je ne vois pas où tu veux en venir ! Saurais-tu être plus précis ?
Aurais-tu repéré quelque bug à corriger ? Smiley confus
Modifié par Tobie (28 May 2010 - 21:33)
Sinon Merci kaen25,
pour tes propositions, notamment quand tu dis:
a écrit :
En plus je pense que simple "this" remplacera aussi bien les "e.target"
-> Je confirme, ça fonctionne !

... A ce propos, je ne suis pas très calé / au javascript ->
* Saurais-tu me dire quelle différence entre une expression du genre "e.target" et "this" ?
* Aurais-tu quelque référence de cours à me proposer, pour me permettre d'aborder facilement ce genre de thématique; à savoir l'utilisation de "e.target" et "this" en tant que argument d'une fonction ?
En fait, j'utilisais ce genre d'attribut parce qu'on me l'avait proposé, mais à vrai dire, sans vraiment comprendre de quoi il s'agissait exactement (variable "interne" propre à javascript... ?)

* Sinon, j'ai essayé ton code:
   function anim(el){ 
      $(el).next('div').next(".Texte_cache").stop().animate({    
                     height:"toggle"    
                 },900,'easeInOutCirc'); 
   } 
 
    $(function(){    
        $('.Bouton_plus')    
            .mouseenter(function(){    
                 anim(this); 
            })    
            .mouseleave(function(e){    
                 anim(this);    
            });    
    })
Ce code est très intéressant, ne serait-ce que dans sa simplicité toute particulière... Après, si on survole [+] plusieurs fois de suite, brièvement, le fonctionnement est perturbé (fenêtre qui reste partiellement fermée...) -> J'avais déjà essayé la fonction stop() comme forme d'anti-rebond mais j'avais dû l'éviter, à cause de ce problème là
-> Aurais-tu une alternative ?
Modifié par Tobie (28 May 2010 - 21:52)
Bon eh bien ça y est,
J'y suis enfin arrivé... Ca maaaaaaarche !!! Smiley biggrin
Euh... Ca, c'était juste pour exprimer ma joie du moment... Enfin, bref, les joies, c'est fait pour être partagé, non ? Alors voilà, en cadeau-bonus, le code que ça donne, au final (avec effet anti-rebonds garanti) Smiley cligne :
	$(function(){
		$('.Bouton_plus')
			.mouseenter(entree)
			.mouseleave(function(e){
				montee(this);
				reset_tempo();
			});
	})

	function entree(e){
		descente(this);
	}

	function descente(el) {
		$(el).unbind('mouseenter'); // Blocage anti-rebonds (si survol répété de l'image)
		$(el).next('div').next(".Texte_cache").animate({
			height:'show'
			},900,'easeInOutCirc',function(){$(el).bind('mouseenter', entree);}); // Annulation / Blocage anti-rebonds
	};
	function montee(el) {
		$(el).next('div').next(".Texte_cache").animate({
			height:'hide'
			},900);
	};

Encore Merci pour votre soutien ! Smiley biggrin
Modifié par Tobie (30 May 2010 - 19:32)
Tobie a écrit :

* Saurais-tu me dire quelle différence entre une expression du genre "e.target" et "this" ?


quand tu fais un selecteur du genre :

$('.maClasse').click(function(){
   var sel = this;
});


jQuery change le scope courant de la function anonyme.
En gros this représente l'élément .maClasse qui a été cliqué.
Modifié par kaen25 (31 May 2010 - 11:54)
Sujet clos
Aller à