How can I expand the stage (in one direction) on rollover? Or click?

Question

Hello,
I'm looking to create an expanding/collapsing HTML5 banner using Edge Animate.
For example, say I start with a 728x90 banner. How can I make the stage expand (from the bottom edge) to 728x270?
At the moment I'm looking to expand on rollover then collapse back to original stage size on rollout - but in the future I know I'll want the same functionality using a button.
All help is appreciated, thank you!

Answer 1

I am on the go for the day but here is a quick routine, using the toggle() method.
In your case you can't collapse the etage to 0, otherwise you have no way of getting to the second click.
In my exmple, click anywhere on the stage, it collapses to the minHeight value of 15.
Click it again and it restores to the predefined height of the stage.
var minHeight = 15;
var myStageHeight = sym.$("Stage").css("height");
sym.$("Stage").toggle(function(){                    // run on first click of Stage
    sym.$("Stage").animate({height: minHeight}, 500 );
}, function() {                                                   // run the second click of Stage
    sym.$("Stage").animate({height: myStageHeight}, 500 );
If you are going to apply to an element, say a button, then its going to require you to move (flow) the button to the collapsed position.
I'll play with that notion later, when I get back.
Try the above
hth
Darrell