Creating an attention-grabber notification

In this recipe we will use background color and chain effects to bring a user's attention to some text.

Getting ready

Remember that flashing text can induce seizures. Think about the audience that will be using your application and keep flashing to a minimum. Use this effect in forms where changes in the DOM might be missed or mandatory form fields need to have the users' attention brought to them.

How to do it...

Use Fx.Tween() to animate a single CSS property.

<script type="text/javascript" src="mootools-1.3.0.js"></script> </head> <body> <form action="javascript:" method="get"> <input id="submit" type="button" value="Find Lorem"/> </form> <div id="lorem_ipsum"> <h2 id="lorem_ipsum_h2">Lorem ipsum</h2> ...

Get MooTools 1.3 Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.