Hi I was wondering if there was a jquery grow function that was the same as sample 2/demo 2 on the spray page here.

http://labs.adobe.com/technologies/spry/samples/effects/grow_sample.html

Dont want to use spray as I have most of my site effects with jquery.

thanks!

• jquery
• spray

The scale effect in jQueryUI can be used to achieve this.

More information

I use the .animate() method for this.

See demo here.

<div class="outer">
  <div class="inner">&nbsp;</div>
</div>

$('div.inner').animate({
    'margin':'100px'
}, 1000);​

Steps for full effect

1. Increase the margins when there is no content.
2. Then when the animation completes, remove the margin
3. set the actual final width and
4. then append the content you want to display.