| Using chain in Mootools
Trying to follow one transition with another.. but the code confuses! |
donovanh
msg:3547722 | 1:57 pm on Jan 14, 2008 (gmt 0) |
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
msg:3547785 | 3:17 pm on Jan 14, 2008 (gmt 0) |
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);
});
|
|
|
