Anthology of Ideas

All the effects are run by a single JS file which just changes the styling of the elements. If you have any experience in JS and CSS, take a look at the /js/effects.css file. If you look for the various switch statements, those are the sections that control the effect.

Effects follow a simple pattern: the setup switch where the element is prepared — current stylings are saved, specific heights etc are set –, the actual effect which is just a changing of some CSS value in 10 steps either showing or hiding, and the cleanup where the effect is finished and defaults are restored etc.

For example:
(e is the element, i is the element id, _d[i] is an array of variables specific to the i)

This is the setup of the slideup effect:

1. case 'SlideUp':
2. _d[i]['height'] = $(i).offsetHeight;
3. if (m === 'show') { /*We need an object to be displayed to retrieve height.*/
4. e.position='absolute'; /*Pull the element out of its default location*/
5. e.visibility='hidden'; /*Hide the element*/
6. e.display='block';/*"Display" the hidden element*/
7. _d[i]['height'] = $(i).offsetHeight;
8. e.visibility=''; /*Show it*/
9. e.position='relative'; /*Put it back where it was*/
10. e.height = '0px'; /*shrink it for the effect.*/
11. }
12. e.overflow="hidden";
13. break;
14. Use the following to copy and paste the code.
    case 'SlideUp': _d[i]['height'] = $(i).offsetHeight; if (m === 'show') { /*We need an object to be displayed to retrieve height.*/ e.position='absolute'; /*Pull the element out of its default location*/ e.visibility='hidden'; /*Hide the element*/ e.display='block';/*"Display" the hidden element*/ _d[i]['height'] = $(i).offsetHeight; e.visibility=''; /*Show it*/ e.position='relative'; /*Put it back where it was*/ e.height = '0px'; /*shrink it for the effect.*/ } e.overflow="hidden"; break;

This is the actual effect:

1. case 'SlideUp':
2. if ( m === 'hide' ) {
3. e.height = Math.floor( _d[i]['height']*s*-0.1)+'px';
4. _d[i].step += 1;
5. } else {
6. e.height = Math.floor( _d[i]['height']*(10-s)*0.1)+'px';
7. _d[i].step -= 1;
8. }
9. break;
10. Use the following to copy and paste the code.
    case 'SlideUp': if ( m === 'hide' ) { e.height = Math.floor( _d[i]['height']*s*-0.1)+'px'; _d[i].step += 1; } else { e.height = Math.floor( _d[i]['height']*(10-s)*0.1)+'px'; _d[i].step -= 1; } break;

This is the cleanup:

1. case 'SlideUp':
2. e.height = _d[i]['height']+'px';
3. if(window.innerHeight){ /*IE has problems setting height to auto.*/
4. e.height = 'auto';}
5. e.overflow="visible";
6. break;

If you have more questions let me know.