[mootools 1.2] fondu entre deux images

bonjour à tous

premier post, première question ^^'

ayant un peu de mal avec le javascript j'essaye de créer un effet de fondu avec une image qui change dans une balise <img />. au clique, mon image change d'opacité, l'image elle même aussi, puis revient à une opacité à 100% :

	var image = $$('div#myElement img');

	image.addEvent('click', function(){	
		exampleFx = new Fx.Tween('myElement', {
			property: 'opacity',
			duration: 500, 
			transition: Fx.Transitions.Sine.easeInOut
		}).chain(function(){
			image.setProperty('src', 'nature.jpg');
			$('myElement').tween('opacity', 0, 1);
		}).start(1,0).start(0,1);

seulement j'ai l'impression de m'être un peu embrouillé les pinceaux et je me demande s'il n'y pas moyen de faire plus "propre".
ce qui me chagrine en fait c'est de devoir ajouter cette ligne "$('myElement').tween('opacity', 0, 1);" car autrement mon effet s'arrête à la première étape, l'opacité passe de 100 à 0 sans revenir à 100 or je pensai y arriver par cette ligne : .start(1,0).start(0,1); mais ce n'est pas le cas...

merci d'avance pour vos lumières
Modifié par mhash (02 Dec 2008 - 20:07)

Si tu veux optimiser ton code je pense qu'il est plus intéressant d'instancier ta tween hors de la fonction déclenché lors du clic.

Ensuite , grâce à la l'option link affecter à la valeur chain (link:chain) tu indique a ton objet qu'il doit attendre d'avoir fini la tween en cours avant d'entamer la suivante.

Pour finir tu déclenche le changement de ton image avec un décalage identique à la durée d'une transition.

	var image = $$('div#myElement img');
	var exampleFx = new Fx.Tween('myElement', {
			property: 'opacity',
			duration: 500,
			transition: Fx.Transitions.Sine.easeInOut,
			link:chain
		})

	image.addEvent('click', function(e){	
		exampleFx.start(1,0);
		exampleFx.start(0,1);
		(function(){image.src='nature.jpg'}).delay(500);
	})

Par contre, assure toi bien que ton image est déjà charger sur la page sinon la latence de chargement risque de foutre en l'air ta jolie transition.
Pour résoudre ce problème regarde du coté de l'objet Assets.
Modifié par Citron.mecanik (07 Dec 2008 - 15:09)

ok merci beaucoup, je vais regarder ça de plus près