Bonjour,
J'utilise prototype.js et script.aculos.us pour un développement web.
Je cherche à réaliser un effet visuel sympathique mais que je n'arrive pas à le créer.

Mon HTML possède un div nommé "result" ou apparait les résultats suite aux requêtes AJAX
Prenons l'exemple d'un internaute naviguant dans des résultats de recherche en cliquant sur les liens "résultats suivants" ou "résultats précédents"

Voici ce que je souhaite réaliser
1) Le div Result recoit un Effect.Opacity de 1 à 0
2) Une requête ajax est envoyée et nous récupérons le nouveau contenu de result
3) Une fois le premier effet d'opacité terminé, je souhaite changer le contenu du div result et lancer un Effect.Opacity de 0 à 1

Malheureusement le contenu du div result change avant la fin du premier Effet.Opacity...

Si vous aviez une idée.

Pour exemple voici mon script

PHP

//Lance l'effet : data est une chaine de caractère pour l'envoi via Ajax.Updater
function goEffet(data){
   Event.stop(event);
   new Effect.Opacity('result', {queue: 'front', duration:1, from: 1, to: 0}); 
   new Effect.Opacity('result', {queue: {position:'end', scope:'result', beforeStart:updateResult(data)}, duration:1, from: 0, to: 1} );
}

PHP

function updateResult(data){
   new Ajax.Updater('result','dispatcher.php',{method:'post',postBody:data});
}

Cordialement.

Salut : )

Il faut que tu fasses par couche

d'abord, faire ta preemière opacité puis dans la fonction de Callback afterFinish faire le Ajax.Updater
puis dans la fonction de callback onComplete faire l'opacité inverse

Voilou : )

Il existe aussi Effect.Fade et Effect.Appear ; )

Merci pour cette piste...

J'ai réalisé ce fragment de code

PHP

function goEffet(data,event){
	Event.stop(event);
	new Effect.Fade('result', 
			{
				queue: 'front', 
				scope: 'result', 
				duration: 0.5, 
				from: 1,
				to: 0, 
				afterFinish: updateResult(data)
			}
	);
}

function updateResult(data){
	new Ajax.Updater('result','dispatcher.php', 
			{
				method: 'post',
				postBody: data, 
				onComplete: appearResult
			} 
	);
}

function appearResult(rep){
	$('result').innerHTML = rep.responseText;
	new Effect.Appear('result', 
			{
				queue: 'end', 
				scope:'result',
				duration: 0.5,
				from: 0,
				to: 1
			} 
	);
}

Cela fonctionne quasiment. J'ai un saut d'affichage lors de la dernière étape (new Effect.Appear)
Sinon le texte est changé pas tout à fait à la fin du premier effet. Peut être mettre un délai sur l'effet appear.

En tout cas merci

Pour information :
le saut provient des paramètres from et to. Mettre 0.1 au lieu de 0