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 : Sélectionner tout - Visualiser dans une fenêtre à part
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 : 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
	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 : 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
 
	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.