GrowShrink.js: Grow or shrink elements inside their parents

Recommend this page to a friend!
  Info   View files View files (9)   DownloadInstall with Composer Download .zip   Reputation   Support forum   Blog    
Ratings Unique User Downloads Download Rankings
Not enough user ratingsTotal: 222 All time: 220 This week: 8Up
Version License JavaScript version Categories
growshrink 1.0.1MIT/X Consortium ...1.0Animation, HTML, jQuery
Description Author

This is a jQuery plug-in that can grow or shrink HTML page elements inside the respective parents elements.

It takes a given page element and can animate it by reducing or increasing its width and height gradually until it is becomes invisible or reaches the size of the parent element.

This plug-in can either grow or shrink the specified element in the direction of a given corners or edges of the element.

Picture of Greg Lane
Name: Greg Lane <contact>
Classes: 1 package by
Country: Japan Japan
Age: ???
All time rank: 1121 in Japan Japan
Week rank: 6 Up1 in Japan Japan Equal

Details
# growshrink.js Growshrink.js is a jQuery Plugin for scaling divs from zero size to the same size as the parent and back again. I used similar code on [this site](https://sequoiaheritage.com/) because I found the jQuery UI wasn't satisfactory for what I wanted to do - especially when using size/scale from the bottom right to top left or bottom left to top right. You can see a live demo of this plugin here -> http://greglane.me/demos/growshrink/ ## Quick start See the source of the enclosed index.html for details. All that is required is to include the plugin and then call growshrink on an element. The element must be nested inside a div with a specific height and width. The nested element will grow to the same size as the parent div. ## Options When calling growshrink on your divs, you have the following parameters and options. (defaults are shown) ###type: 'grow' options are 'grow' or 'shrink'. ###direction: 'bottomright' options are topleft, topright, bottomleft, bottomright This is the direction in which the animation is heading and it always begins from the opposite corner. So a 'grow' with direction set as 'topleft' will begin in the bottom right corner. Likewise, a 'shrink' with direction set to 'bottomright' will begin in the top left corner. ###growspeed: 1000 This is the speed of the animation in milliseconds. So 1000 is equal to one second. ## License and acknowledgements This plugin is released under an MIT style license. However, it does include HTML5 Boilerplate which has its own license.
  Files folder image Files  
File Role Description
Files folder imagecss (1 file)
Files folder imagelib (5 files)
Accessible without login Plain text file index.html Example Sample index
Accessible without login Plain text file LICENSE.md Data License
Accessible without login Plain text file README.md Doc. Readme and instructions for use.

  Files folder image Files  /  css  
File Role Description
  Accessible without login Plain text file main.css Data Main CSS

  Files folder image Files  /  lib  
File Role Description
  Plain text file growshrink.js Class plugin file
  Plain text file growshrink.min.js Class Minified plugin file
  Accessible without login Plain text file jquery-1.8.2.min.js Aux. jQUery
  Accessible without login Plain text file main.js Example Contains examples of use
  Accessible without login Plain text file modernizr-2.6.2.min.js Aux. of HTML5 bolierplate)

 Version Control Unique User Downloads Download Rankings  
 100%
Total:222
This week:0
All time:220
This week:8Up