A simple function to morph certian style attributes of a HTML element.

Samples:

You can morph certian attributes of almost any HTML element, and even morph elements within other elements.

• Paragraph with inner button both morphing their positions
• DIV randomly changing every morphable attribute

Documentation

This is a very simple function you can call using Javascript.

Get the file library

Download version .91 Jan 17 1998

Insert it into your page

<SCRIPT SRC="morph.js"></SCRIPT>

Take any element on your page, make sure it has an ID, and define one or all of the following CSS Style attributes: top, left, height, width, background, color, border-color.  Note, with the colors, they MUST be defined using rgb() like "background: rgb(200,200,200);"!

Create a Javascript and call the function:

morph(document.all.myelement,timing,steps,style,done);

• document.all.myelement
  • reference to the element to morph
• timing
  • in ms, time between each step
• steps
  • number of steps in the morphing process
• style
  • replacement style elements, ex: "top:100;left:400;background:rgb(0,0,0);"
• done
  • string containing JavaScript code to execute when the morph is over, ex: "donefunc();"

Please feel free to modify the code, it is commented to help you lea how it works, and especially, PLEASE feel free to email me jer@jeremie.com with your comments/questions/suggestions/bugs/code enhancements, whatever!