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 19990401

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.getElementById('myelementid'),timing,steps,style,done);

• document.getElementById('myelementid')
  • DOM 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:100px;left:400px;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 learn how it works, and especially, PLEASE feel free to email me jer@jeremie.com with your comments/questions/suggestions/bugs/code enhancements, whatever!