Mootools element.morph() example
Mootools, like other JavaScript frameworks, provides some easy to use animations which I’ve used successfully quite a number of times, they really do save a massive amount of time and when used appropriately can add some gloss to your project. I’d always stuck with the old notation of using the Mootools Fx methods and had set each property to be altered…but recently, I spent a little time reading the Mootools documentation and found that not only can you morph an element from one CSS class to another, you can use a simpler “element.morph()” syntax, rather than having to set up and Fx object first…nice!
I think the best way to explain it is with a working example.
The example assumes a some reasonably basic Mootools/JavaScript knowledge but I have tried to keep it simple so it will be easier for less experienced developers to use:
HTML (some meta tags etc removed for clarity – note that cnet.220.js is the CNet version of Mootools 1.2, you can use either CNet’s version or the standard Mootools 1.2 version):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title>Mootools element.morph() example</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="morph.css" type="text/css" /> <script type="text/javascript" src="cnet.220.js"></script> <script type="text/javascript" src="morph.js"></script> </head> <body> <div> <div id="main"> </div> </div> </body> </html>
JavaScript:
window.addEvent("domready", function()
{
// obtain the main container element
var m=$("main");
// check we have successfully obtained the main container element
if(m)
{
// create a div which will be morphed
var el=new Element("div",
{
"class":"morph_div"
}).inject(m, "top");
// create the button which will start the morph
var btn=new Element("button",
{
type:"button",
html:"Morph element",
"class":"morph_btn"
}).inject(m, "before");
// set a variable which will be used to indicate which state the morph element is in
var btn_status=0;
// add an onClick event to the above button which morphs the morph element
btn.addEvent("click", function()
{
// update the morph status
btn_status=btn_status==0?1:0;
// set the morph transition duration and type - duration is in milliseconds, for types see the mootools docs on mootools.net
el.set("morph", {duration:700, transition:"bounce:out"});
// morph the morph element to the opposite css class to that which is it currently in
el.morph(btn_status?"div.morph_div_alt":"div.morph_div");
});
}
else
alert("Sorry, couldn't find the main container element");
});CSS
html
{
background:#fff;
color:#494949;
font:100 80% verdana,arial,sans-serif;
padding:0;
margin:0;
}
body
{
padding:2em 0;
margin:0;
}
div
{
float:left;
width:100%;
margin:0;
padding:0;
}
a
{
text-decoration:none;
color:#196496;
}
div.site_outer
{
float:none;
margin:0 auto;
width:960px;
}
div.site_inner
{
padding:1em 0 0 0;
}
div.morph_div
{
border:1px solid #f0f;
background:#ff0;
width:50px;
height:50px;
}
div.morph_div_alt
{
border:10px solid #000;
background:#0ff;
width:250px;
height:250px;
}
NOTES:
- You can only morph between mathematically calculable CSS properies e.g. width, height, border width, colours etc – you cannot morph between e.g. 2 different background images for obvious reasons!
- All properties which are to be morphed between must be explicitly declared in both the source and destination CSS classes – you cannot morph from/to an inherited property
That’s it…I hope it’s helpful