Mega Code Archive

 
Categories / JavaScript DHTML / Scriptaculous
 

Morph a paragraph

<html> <head> <title>Untitled Document</title> <script src="scriptaculous-js-1.8.2/lib/prototype.js" type="text/javascript"></script> <script src="scriptaculous-js-1.8.2/src/scriptaculous.js" type="text/javascript"></script> <script src="scriptaculous-js-1.8.2/src/unittest.js" type="text/javascript"></script> <script type="text/javascript"> Event.observe(window, 'load', function() {   var demo = $('demo');   demo.setOpacity(0.5);   demo.observe('click', function() {     demo.morph({       width: '50ex', height: '10em',       backgroundColor: '#33de22', color: '#009',       borderWidth: '1em', borderColor: '#009',       opacity: '1'     },      { duration: 2 });   }); }); </script> </head> <body> <p id="demo"     style="width: 30ex;            height: 6em;            border-width: 0.2em;            border-color: #090;">           Click on this paragraph. </p> </body> </html>