how to execute multiple animations simultaneously in mootools?

Question

I have two divs (say, divs with ids: div1 and div2) whose height I need to expand using Fx.Tween And I want the animations to be simultaneous.

'#div1' 's style.height is to be changed from auto to 0. '#div2' 's style.height is to be changed for current height to a new height calculated by a function called calculateHeight()

how do I do that?

Answer 1

Mootools animations aren't blocking (animations in JS very rarely are!) so simply executing the two tweens sequentially will have the desired affect (as close as a human can perceive)

function go()
{
    $('div1').tween('height', 0);
    $('div2').tween('height', calculateHeight());
}

function calculateHeight()
{
    return 0; //or whatever
}

Answer 2

I think this has to do with the wait:false option. I'm not a programmer and mootools is easy but not as much to be so good at it but I remember reading some docs where it says you can control wether the second animation works as soon as the first one ends or simultaneously.

Chain Method: wait Injects pauses between chained events. Syntax

myClass.wait(duration);

Arguments 1. duration - (integer) The duration (in milliseconds) to pause the chain stack; defaults to 500.

I think you should CHAIN the morphing and make it wait(0). But I'm not sure. Hope this helps.