The HTML
Setting this up is extremely easy. Our HTML looks like so:
<form name="job">
<div id="titlefield">
<h3>Title of Project</h3><input type="text" name="title_fade" id="title_fade" value="Ajax Fun and Games" size="40" 'titlefield')" />
</div>
</form>
We’ve wrapped our text input with a div, which is the container that will show off the fade effect, so it’s a bit more dramatic. You could certainly run the fade effect on the text field itself. If you were to do it that way, you could easily then use unobtrusive JavaScript to access your inputs via the DOM, and then dynamically add the event handler to each input that had “_fade” in the ID string.
You can see the event is called with onBlur, so that when the text field loses focus, the effect is generated. The first parameter is going to be the number of steps (and colours) that are used in the fade. The second parameter is the ID of the element on which you wish to have the fade effect.
If you were to run the fade only on the input, you would change the handler to pass its own Id using the this keyword like so:
<input type="text" name="title_fade" id="title_fade" value="Ajax Fun and Games" size="40" this.id)" />