Welcome to WebmasterWorld Guest from 23.23.46.20

Forum Moderators: open

Using chain in Mootools

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

   
1:57 pm on Jan 14, 2008 (gmt 0)

10+ Year Member



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!

3:17 pm on Jan 14, 2008 (gmt 0)

10+ Year Member



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);
});
 

Featured Threads

Hot Threads This Week

Hot Threads This Month