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?