mouseenter, mouseleave et chain
Bonjour,
J'ai encore du mal avec les mouseenter et mouseleave des menus qui fonctionnent bien lorsqu'on laisse l'animation se finir mais bug lorsqu'on se deplace rapidement d'un element a l'autre.
Le site est la: http://www.iconsulting-fr.com/tests/aqua/index.html
Si je suis scrupuleusement l'exemple de la doc Mootools, cela fonctionne.
Ca ca marche:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
list.each(function(item, index) {
item.addEvents({
'mouseenter': function(){
this.set('tween', {
duration: 1000,
transition: Fx.Transitions.Bounce.easeOut
}).tween('background-position', '0 20px');
},
'mouseleave': function(){
this.set('tween', {}).tween('background-position', '-160px 0');
}
});
}); |
Mon soucis est que je voudrais aussi utiliser le chain et la ca se complique. le code suivant me renvoie /.../.chain is not a function
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
list.each(function(item, index) {
item.addEvents({
'mouseenter': function(){
this.set('tween', {
duration: 1000,
transition: Fx.Transitions.Bounce.easeOut
}).tween('background-position', '0 20px').chain(
function() {
alert('enchaine');
}
);
},
'mouseleave': function(){
this.set('tween', {}).tween('background-position', '-160px 0');
}
});
}); |
Avec le code suivant le chain fonctionne mais gere tres mal les mouseenter, mouseleave trop rapide.
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
|
list.each(function(item, index) {
var opacity = new Fx.Tween(title, {duration: 800});
var showContent = new Fx.Tween(contentItem, {duration: 800});
item.addEvents({
'mouseenter': function(){
opacity.start('opacity', 0).chain(
function(){
showContent.start('height', 300);
}
);
},
'mouseleave': function(){
this.set('tween', {}).tween('background-position', '-160px 0');
showContent.start('height', 0);
}
});
$('intro-menu').addEvent("mouseleave", function() {
var opacity2 = new Fx.Tween(title, {duration: 2000});
opacity2.start('opacity', '1');
});
}); |
Comment on fait tout bien marcher?
Merci a vous tous.
