Using chain in Mootools

Trying to follow one transition with another.. but the code confuses!

[donovanh]

I've set up a comment form to submit a comment using ajax, and the server response updates a hidden div.

I had used scriptaculous scripts to have the message slid in while the comment form slides out, and it looked fine. However I since discovered that having 200k of javascript for such a transition was overkill. I switched to Mootools.

However, I'm really struggling to get anything like the previous effect. Ideally, what I'd like to do is have a chain that works as follows:

1) The comment form fades away
2) The containing div resizes to a height of 100px
3) The success message fades in

Any help much appreciated!

[donovanh]

This is where I'm at with the code:

I start by declaring the effect to fade the form away, and follow it by resizing the container (addmessage). I then set the success message div to display:block, and fade it in.

However it only gets as far as fading the form away, and resizing the box. The success message doesn't appear.

var fadeform = new Fx.Style('addreview', 'opacity', {duration: 400,transition: Fx.Transitions.Quart.easeInOut} );
fadeform.start(1,0).chain(function(){
 var fx = new Fx.Styles('addmessage', {duration:500, wait:false});
 fx.start({'height': 50}).delay(5000);
}).chain(function(){
 document.getElementById('message-success').innerHTML = result;
 var div = $('review-success').setStyles({display:'block',opacity: 0});
 new Fx.Style('message-success', 'opacity', {duration: 400} ).start(1);
});