Intereactive Web Design - Sugar Land, TX

As we are building out our ap, Mosaic, we are starting to add in a few of the detail touches that make a UI a little more comfortable to use. In many places, such as the navigation, we are swapping the background color of a link to show the rollover (or :hover) effect. It’s a very sharp on/off transition that we wanted to make a bit more smooth.

So I started in on the problem using Mootools native Morph effect and was going to animate in the background color using it’s capability to pass in CSS rules. But I realized that it was going to pull out alot of control of the layout from the CSS and make me have to write separate classes for “off state” and “over state” which will not degrade gracefully.

30 minutes later I came up with this short piece of code that uses the native :hover element and will override it’s functionality.

$$('.animate').morph('.nav').addEvents({
	'mouseenter': function() {
		this.morph('.nav:hover');
	},
	'mouseleave': function() {
		this.morph('.nav');
	}
})

Where we have this HTML

<a class = "animate nav" href = "#">Link 1</a>

The class “nav” is what styles the actual a tag and it’s corresponding nav:hover is what changes the background color. The class “animate” is what hooks the mootools code on it to make it animate.

The only thing extra I had to go back and add to the CSS to make this work was that I had to implicitly declare a background color on the “nav” class. The Morph class needs both values to go back and forth to.

The code is small and can easily be modified to be put into a class or function to pass in the classes needed so that it’s more global. I’m sure as I start to implement this around the ap more I’ll find ways to make it more generic. Here is an example of it in use: Link Animation Example