The following demos are not best practice examples, they should just show what you can do with jsMorph.
Most of the demos can be found in the Plugins section as real usable plugins.
This accordion box demonstrates what jsMorph can do.
It's an unordered list with H2s and DIVs in it, being controled by a tiny javaScript. See demo of accordion in the Tutorial section.
The following links show you what you'll find on this site
The fron page of jsMorph with all the features listed.
Find Demos that explain how to use jsMorph and how it works.
...just like this accordion box!
The download page that explains how to use jsMorph with the additional easing functions.
Find also some functions used in the demo / tutorial section.
See all the methods and other things you need to know to get jsMorph work for you on the documentation page.
Find some additional useful demos here like:
- Slide show transitions
- Bouncing ball
- Menu demo
- Chart bars
- iPhone demo
You'll also recognice that here the backwards flag is set in the object's onMorphEnd callack function other than in the menu demo.
Eather way is possible although here we would need to change it for 2 elements which is done in the callback function automatically.
And again: you can add as many elements as you want without haveing to change the code.
var acc = function (acc, duration, head, body) { var heads = acc.getElementsByTagName(head ||'h2'), content = acc.getElementsByTagName(body ||'span'), myMorph = new jsMorph(); for (var n=heads.length; n--;) { content[n].style.cssText = 'height:auto; display: block'; myMorph.concat(content[n], {'height': '0px'}, {duration : duration, delay : 0}, function(n) {return --n*n*n*n*n+1}, null, null, function (obj) {obj.backwards = obj.backwards ? false : true} ); heads[n].me = n; if (n) { content[n].style.height = 0; content[n].backwards = true; } else acc.current = n; } acc.onclick = function(e) { // event delegation var e = e || window.event, obj = e.target || e.srcElement; if (obj.tagName.toLowerCase() == 'h2' && obj.me != acc.current && !myMorph.timer) { myMorph.start(content[obj.me], content[acc.current]); acc.current = obj.me; } }; }; acc(document.getElementById('acc'), 200);