Jquery grow effect like spray

Go To StackoverFlow.com


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.


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


2012-04-03 19:50
by Sam Miller


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

More information

2012-04-03 19:53
by Rory McCrossan
Thanks for your fast reply! , Just saw it the samples I saw was growing from the right to left but have the correct page now to do this just need to add jquery-ui.min.js to my header - Sam Miller 2012-04-03 20:01


I use the .animate() method for this.

See demo here.

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

}, 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.
2012-08-30 18:56
by Robin Maben