Fx.morph sur un evenement click

**dqniel** · 11/08/2011, 19h42

Bonjour a tous, voici mon problème, je suis sur un concept de 'slide in et out' de DIV, en cliquant sur le lien la div se développe ou se ferme.

Ca fonctionne... pas a 100%.
Les événements se lancent, mais se stoppent aléatoirement en cours de chemin, et il faut recliquer pour continuer l'ouverture et pour la fermeture c'est encore pire, ca s'arrette bien plus...

Je vous montre ça:

http://www.danielbodi.com/demo/slide/slide.html

Voici le code:

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
 
<!DOCTYPE HTML> 
<html> 
<head> 
<script type="text/javascript" src="mootools.js"></script> 
<link rel="stylesheet" type="text/css" href="style.css" media="screen"/> 
<script type="text/javascript" src="slide.js"></script> 
</head> 
<body> 
<div id="hori1"> 
        <a href="#">ouvrir<img  id="ouvrhori1" src="haut de page.png"></a> 
        <a href="#">fermer<img  id="frmhori1" src="haut de page.png"></a> 
</div> 
</body> 
</html>

et le .js:

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
window.addEvent('domready', function(){ 
 
var el3 = $('hori1'); 
el3.set('morph', {duration: '1000', transition: 'bounce:out'}); 
var el4 = $('ouvrhori1'); 
var el5= $('frmhori1'); 
 
//event mouse_enter 
$('hori1').addEvents({ 
    mouseenter: function(){ 
         this.morph({ 
        'opacity': 1, 
        'background-color': '#d2ddec', 
      }); 
    }, 
    mouseleave: function(){ 
      // Morphes back to the original style 
      this.morph({ 
        opacity: 1, 
        'background-color': '#c7b299', 
        }); 
    } 
  }); 
 
//event click  
  el4.addEvent('click', function(){ 
       el3.morph({ 
        'background-color': '#d2ddec', 
        'height': '500px', 
        'margin-top':'-550px', 
        'z-index':9 
 
      }) 
      ; 
    }); 
 
    el5.addEvent('click', function(){ 
      el3.morph({ 
        'background-color': '#c7b299', 
        'height': '150px', 
         'margin-top':'0px', 
        'z-index':4 
      }) 
      ; 
    }); 
 
 
 
});

Voilà, est ce que j'ai zappé quelque chose?

**vermine** · 12/08/2011, 07h29

Bonjour,

Je testerai plus tard si j'ai l'occasion mais en attendant, il y a ceci (voir les couleurs) :

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
//event mouse_enter 
$('hori1').addEvents({ 
    mouseenter: function(){ 
         this.morph({ 
        'opacity': 1, 
        'background-color': '#d2ddec', 
      }); 
    }, 
    mouseleave: function(){ 
      // Morphes back to the original style 
      this.morph({ 
        opacity: 1, 
        'background-color': '#c7b299', 
        }); 
    } 
  });

**dqniel** · 13/08/2011, 20h53

Oui, mais l'event mouse enter et mouse leave ne pose aucun probleme, si je rejoins tout en mouse enter et mouse leave (ce qui est dans l'event click) ces ' stop bugs' n'apparaissent pas.

L'event click poserait il donc probleme?

Merci pour ton aide

**vermine** · 14/08/2011, 13h10

Il faudrait faire des tests selon ce code (j'enlevé le margin-top) :

Code :

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

1
2
3
4
5
6
7
8
9
 
	el5.addEvent('click', function(){
	  el3.morph({
        'background-color': '#c7b299',
		'height': '150px',
		'z-index':4
      })
	  ;
    });

Une fois en haut, il s'ouvre vers le bas et se ferme vers le haut correctement. Je sais bien, ce n'est pas le mouvement recherché mais c'est un début de piste.

Autre souci, votre page n'est pas compatible IE (je n'ai vérifié que celui-là). Je ne sais pas si c'est important pour vous.

Fx.morph sur un evenement click

Bibliothèques & Frameworks

Vue hybride

Discussions similaires

Partager

Partager