Salut,

Je suis sur un bout de script qui me rend dingue depuis ce matin.

J'ai un bloc <div> avec un lien <a href="#" id="clic">cliquez ici</a>
Lorsqu'on clique sur le lien, le bloc <div> doit disparaitre en "fade" et ensuite le visiteur est redirigé vers une page quelconque.

En gros:
Le visiteur clique sur le lien -> le bloc disparaît en "fade" -> lorsque l'animation "fade" est terminée, le visiteur doit être redirigé vers une page.

Seulement impossible de trouver comment faire la redirection une fois que l'animation est finie.

J'ai essayé plein de choses, dont ça :

$('clic').addEvent(
	'click', function(e) {
		divBloc.fade(0);
	},
	'complete', function(e) {
		self.location.href = 'page.htm';
	}
);

Mais impossible de trouver une solution.

Si quelqu'un à la solution ...

Merci par avance.

PS: J'ai oublié de préciser que j'utilisais la librairie Mootools

Ton animation dure toujours autant de temps ?
Si oui, utilise la meta balise html : refresh ;).

<META HTTP-EQUIV="Refresh" CONTENT="5; URL=http://www.monsite.com/laoujeveuxaller.html">

Dans le content, le premier paramètre dit que 5 secondes après que la balise ait été lue, il s'active.
Le deuxième aramètre dit là où il doit rediriger.

Si ton animation dure 2 secondes, remplace le 5 par 2, bien évidemment ;).

Met ta balise juste avant la fermeture de ton </body>.

Ouais mais c'est dégueulasse et pas fiable du tout... le temps de l'animation peut varier en fonction de nombreux paramètres.

Je préfèrerai une solution utilisant un évènement.

Merci quand même pour la réponse

Up

Up

Si tu mets les deux instructions à la suite, je suppose que ça redirige avant la fin du fade ?

Mais au fait ton fade, il sort d'où ? J'ai pas réussi à le trouver dans la doc de Mootools ... ?

Citation : Golmote

Si tu mets les deux instructions à la suite, je suppose que ça redirige avant la fin du fade ?

Effectivement, ça serait trop beau.

Citation : Golmote

Mais au fait ton fade, il sort d'où ? J'ai pas réussi à le trouver dans la doc de Mootools ... ?

J'ai juste téléchargé l'exemple ici: http://demos.mootools.net/Effects et j'ai adapté.
Le fade(0) fonctionne parfaitement si j'enlève la redirection

Ok, j'avais très mal cherché...

Euh... bah je connais pas Mootools, donc je propose des idées, mais j'en sais trop rien...

EDIT : la doc parle d'événements qu'on peut appliquer sur les transformations... et "complete" en fait partie !

Un truc comme ça, t'as essayé ?

$('clic').addEvent(
  'click', function(e) {
    divBloc.fade(0).addEvent(
      'complete', function(e) {
        self.location.href = 'page.htm';
      }
    );
  }
);

Ben je pense que j'ai dû tester oui.

Pour en être sûr, j'ai refais un essai avec ton code, mais là encore le fade() s'applique sans problème, mais une fois fini.. aucune redirection

J'ai finalement du adapter en utilisant un Morph.
Ça marche très bien mais je t'avoue que si tu trouve une solution avec le fade(), ça serait plus facile à intégrer pour des utilisations futures

Sinon voila le code utilisant le Morph:

var morphObject = new Fx.Morph(divBloc, {
	onComplete: function() {
		document.getElementById('bloc_name').style.display = "none";
		self.location.href = "page.htm";
	}	
});

var morphStart = function() {
	this.start({
		'opacity': 0
	});
}

$('clic').addEvent('click', morphStart.bind(morphObject));

Merci pour tes réponses en tout cas

Je ne suis pas sûr que ce soit possible directement avec le fade...

Parce que le fade est sans doute un objet Fx non ?

Je pense que ta solution actuelle est la bonne.

Mets le sujet en résolu

Il n'y a pas moyen d'appeler une fonction callback après l'animation (à la manière de jQuery par exemple) avec Mootools ?

Bah si, mais que en déclarant l'animation avec Fx je crois...

Sans doute que le fade() peut être déclaré en tant que Fx.QuelqueChose mais du coup ça reviendrai à faire la même manip que plus haut.

Mais bon du coup ça voudrait dire qu'il n'y a pas de solutions plus simple...

Je crois que je vais effectivement mettre en résolu