Morph a paragraph : Morph « Scriptaculous « JavaScript DHTML






  1. JavaScript DHTML
  2. Scriptaculous
  3. Morph

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>








Related examples in the same category