To explore the morph method, we will use a div with text inside it to morph several of its properties.
We will use an element to trigger the animation effect. We will run the animation on a div element with an ID of
morphDiv
.<a href="#null">Morph</a> <div id="morphDiv"> <p>My Morphing Box.</p> </div>
We will give
morphDiv
some CSS styles to modify its default styles.#morphDiv { width:100px; height:100px; border:1px solid #333; background:#ccc; font:normal 12px Arial, Helvetica, sans-serif; }
We add a click event listener to the
<a>
element so that when it's clicked, it executes themorph
method onmorphDiv
. We transition several properties.$$('a').addEvent('click', function(){ $('morphDiv').morph({ 'width' : 200, 'height' : 200, 'border' : '5px dashed #ff0000', 'font-size' : '24px' }); });
When you click on the
<a>
element, it should transition all of the CSS properties ofmorphDiv
to the values we've...