Fx.morph sur un evenement click
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:
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:
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?
