Multiple Effects in line // Effect.Move & updateContent

Question

Hi all!
Could anybody kindly help me out? I'm totally confused about
how to reach the following function:
I want three actions to be made after another.
1.) Move the <div id="main> with Effect.Move to a
defined position, then...
2.) Update the Content of the element <div
id="content"> using Utils.updateContent , and if done...
3.) move the <div id="main"> to a defined position
again
The ele and url variables should be passed with the link to
start this function,
such as < onClick="myFunction('the_ele', 'the_url.php');
I could reach a little success, however without the first
effect, with this one, but how can i add the first effect here,
since Effect.Move does not support a "finish:"-function (afaik)?
<script language="javascript" type="text/javascript">
function myCtL(ele,url){
Spry.Utils.updateContent(ele, url, function()
{move_effect2.start();} );
</script>
Another possibility may be to make use of a cluster, but i
don't know how to pass the variables 'ele' and 'url' for the
UpdateContent function.
My Cluster-experiment did look like this, however without
success:
<script type="text/javascript">
UltraMove = function(element, options)
Spry.Effect.Cluster.call(this, options);
var StartMover = move_effect1;
var Update = Spry.Utils.updateContent(ele,url);
var EndMover = move_effect2;
this.addNextEffect(StartMover);
this.addNextEffect(CtLdr);
this.addNextEffect(EndMover);
UltraMove.prototype = new Spry.Effect.Cluster();
UltraMove.prototype.constructor = UltraMove;
</script>
As you will surely notice, i'm a newbie concernig ajax and js
and taking a closer look ath the samples and documents has
extremely confused me! :-)
Thanks in advance for any kind of help or hint!!!
Hardy

Answer 1

Hi Hardy,
The pattern you seek (effect, update, effect) can be seen in
this sample:
http://labs.adobe.com/technologies/spry/samples/utils/update_content.html
Basically you need to chain your events together by using
observers or callback functions. In the sample above, this function
shows the pattern:
function fadeIt(ele,url){
Spry.Effect.DoFade('apDiv1',{ duration: 500, from: 100, to:
0, finish: function() {
Spry.Utils.updateContent(ele, url, function() {
Spry.Effect.DoFade('apDiv1',{ duration: 500, from: 0, to:
100 });
The function above chains the events together by defining
callback functions for each step which then trigger the next step.
--== Kin ==--