Using jquery to fade in validation messages in and out

Question

Hello,
I am using spry validation on my form and I have it where it pops up a graphic when the validation happens. Now to dress it up better I would like those graphics to fade in and out depending if they meet the validaton or not instead of just dissapearing. Does anyone know how to do this using Jquery or some other sort of method? I am new to it. Below is code for my form and css for validation
<div class="contactform">
         <form action="POST" method="get" name="contact" id="form1">
         <p>Name: (Required)</p>
         <span id="spryName">
         <input name="req" value="" class= "tb" type="text" id="req" >
         <img class="textfieldRequiredMsg" src="_images/valbox.png"  ><span class="textfieldRequiredMsg"></span></span>
         <p>Company: (Required)</p>
         <span id="spryComapny">
         <input name="company" type="text" class="tb" >
         <img class="textfieldRequiredMsg" src="_images/valbox2.png"  ><span class="textfieldRequiredMsg">.</span></span>
         <p>Email: (Required)</p>
         <span id="spryEmail">
         <input value="" name="email" type="text" class="validate[required] tb" id="email" >
   <img class="textfieldRequiredMsg"  src="_images/valbox3.png" ><img class="textfieldInvalidFormatMsg"  src="_images/valemailformat.png" ><span  class="textfieldRequiredMsg">.</span><span  class="textfieldInvalidFormatMsg">.</span></span>
         <p>Phone:</p><input name="name" type="text" class="tb" >
         <p>What do you want done? (Required)</p>
         <div class="comments"><span id="spryComments">
           <textarea class="commentstext" name="comments" cols="50" rows="10"></textarea><br /><br />
         <img class="textareaRequiredMsg" src="_images/valcomments.png" >
           <span class="textareaRequiredMsg"></span></span></div></br /><br /><br />
         <div class="formbtns">
         <input name="Submit" type="submit" value=""  class="submitbtn"> <input name="Clear" type="reset"  value="" onClick="setFocus();" class="clearbtn">
         </div>
         </form> </div>
@charset "UTF-8";
/* SpryValidationTextField.css - version 0.4 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
/* These are the classes applied on the error messages
* which prevent them from being displayed by default.
.textfieldRequiredMsg,
.textfieldInvalidFormatMsg,
.textfieldMinValueMsg,
.textfieldMaxValueMsg,
.textfieldMinCharsMsg,
.textfieldMaxCharsMsg,
.textfieldValidMsg {
    display: none;
/* These selectors change the way messages look when the widget is in one of the error states.
* These classes set a default red border and color for the error text.
* The state class (e.g. .textfieldRequiredState) is applied on the top-level container for the widget,
* and this way only the specific error message can be shown by setting the display property to "inline".
.textfieldRequiredState .textfieldRequiredMsg,
.textfieldInvalidFormatState .textfieldInvalidFormatMsg,
.textfieldMinValueState .textfieldMinValueMsg,
.textfieldMaxValueState .textfieldMaxValueMsg,
.textfieldMinCharsState .textfieldMinCharsMsg,
.textfieldMaxCharsState .textfieldMaxCharsMsg
    display: inline;
    color: #FFF;
    background-image: none;
    background-repeat: no-repeat;
    vertical-align:top;

Answer 1

I have my images in my Dreamweaver assets folder.  I'm not sure what as2 or as3 are...I don't know if that helps, my skill level in Flash and DW are pretty basic.  Any suggestions?  Thank you!