Discussion :

[Damouille]

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.

[Damouille]

Bon, selon mes recherches j'arrive a cette conclusion.

Le fx de mootools implemente nativement la methode chain. C'est pour ca que l'on peut faire

Code :

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

1
2
3
4
5
6
7
 
var opacity = new Fx.Tween(title, {duration: 800});
opacity.start('opacity', 0).chain(
	function(){
		alert('enchaine stp');
	}
);

En revanche si je lance le tween de cette facon (qui gere mieux les mouseover)

Code :

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

1
2
3
4
5
6
7
8
9
10
11
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');
			}
		});

Je n'ai pas acces au chain.

Il faut implementer le chain a la mano ? Comment fait-on ?

Dites-moi si je fais fausse route, c'est plus que probables car je debute en js et y'a pas mal de chose qui me depassent.

[Damouille]

C'est toujours pas le top mais ca marche deja mieux avec un myFx.cancel(); sur le mouseleave.

La page est desormais ici : http://www.iconsulting-fr.com/demos/aqua/

[vermine]

En passant par:

Code :

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

Fx.Morph

Vous aurez accès à la propriété:

Code :

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

link: 'chain'