Jquery validate with fade in and hide
<p>I have a JS validation code like this :</p>

<pre><code>$(document).ready(function(){
    $('#username').keyup(username_check);
}); 

function username_check(){  
    var username = $('#username').val();
    if(username == "" || username.length &lt; 4){
        $('#username').css('border', '3px #CCC solid');
        $('#tick').hide();
    }else{
        jQuery.ajax({
            type: "POST",
            url: "check_username.php",
            data: 'username='+ username,
            cache: false,
            success: function(response){
                if(response == 1){
            $('#username').css('border', '3px #C33 solid'); 
            $('#tick').hide();
            $('#cross').fadeIn();
                }else{
            $('#username').css('border', '3px #090 solid');
            $('#cross').hide();
            $('#tick').fadeIn();
                }
            }
        });
    }
}
</code></pre>

<p>HTML Code :</p>

<pre><code>&lt;input type="text" name="username" id="username" class="input"&gt;
&lt;img id="tick" src="images/tick.png" width="16" height="16"/&gt;
&lt;img id="cross" src="images/cross.png" width="16" height="16"/&gt;
</code></pre>

<p>This code working good but now I want the image should be hide before validation. Below is the screenshot.</p>

<p><img src="http://i.stack.imgur.com/axkSz.png" alt="enter image description here"></p>
