[résolu] (mootools 1.2) deux action sur un même élément (fade in/out).

Bonjours,
voilà, je galère depuis hier pour un truc tout bête. J'essaye d'attribuer à un élément deux actions. La première étant de faire apparaître un div, la seconde (évidemment) de le faire disparaître.

Pour cela je suis parti d'un script de demo. Malheureusement cet exemple utilise un élément par action.

Je suis donc aller chercher ce bout de code sur le site Woork qui permet un slide entrant/sortant avec un seul élément :

window.addEvent('domready', function(){
	
	var mySlide = new Fx.Slide('top-panel');
	var mySlide = new Fx.Slide('top-panel').hide();
	$('toggle').addEvent('click', function(e){
		e = new Event(e);
		mySlide.toggle();
		e.stop();
	});
});

Je l'ai comparé avec mon code, j'ai essayé plein de bidouille et d'autres bout de code, mais ça ne fonctionne évidemment pas.

window.addEvent('domready', function() {
	var el = $('espaceperso');
	var el = new Fx.Slide('espaceperso').hide();
	
	$('fadeOpacity').addEvent('domready', function(e) {
		el.fade('hide');
	});	
	
	$('tweenOpacity').addEvent('click', function(e){
		e = new Event(e);
		el.fade('in');
		mySlide.toggle();
		e.stop();
	});
	
});

Ci-dessus le code actuel censé faire apparaître et disparaître un div nommé "espaceperso" en cliquant sur un lien dont l'id est "tweenOpacity".

Remarquez qu'un lien dans le div permettant un "fade out" me conviendrais également à défaut d'un bouton à double emplois.

Merci d'avance parce que là je sais plus vraiment où me tourner d'autant que les forums de mootools ont disparus …)
Modifié par AlbaG (01 Aug 2008 - 14:41)

Salut AlbaG,
En fait tu n'as pas besoin d'attribuer 2 actions a un éléments.
La methode toggle() de l'objet Fx.Slide s'occupe de tout :
si mySlide est sorti , il le rentre
Et si il est rentré , il le sort
http://docs.mootools.net/Plugins/Fx.Slide#Fx-Slide:toggle

La methode hide() permet de cacher mySlide initalement.

window.addEvent('domready', function(){
	var mySlide = new Fx.Slide('espaceperso');
	mySlide.hide()

	$('tweenOpacity').addEvent('click', function(e){
		e.stop();
		mySlide.toggle();		
	});
});

Et si l'element n'est pas une balise <a> ou <button> ou autre element html ayant déjà un évenement par défault sur le click, tu devrais même pouvoir te contenter de ça :

window.addEvent('domready', function(){
	var mySlide = new Fx.Slide('espaceperso').hide();
	$('tweenOpacity').addEvent('click', mySlide.toggle());
});

Et bien merci beaucoup, tu m'as carrément sauvé sur ce coup là.