用JavaScript加载动画

我使用下面的代码来验证一些表单字段。我已经检测到来自服务器的响应需要几秒钟，并且我将包含某种动画，该动画应该表明验证尚未完成。

这是我使用的JavaScript:

<script type="text/javascript">
$(document).ready(function(){
console.log("principio");
//control de alias
    $("#alias").keyup(function(){
        var ID=$("#alias").val();
        var REST=$("#rest").val();
        $.post("check_username.php", { username: ID, rest: REST},
                function(result){
                    console.log(result);
                    //if the result is 1
                    if(result == 1){
                        document.getElementById('mensajealias').innerHTML ="Alias disponible";
                          document.getElementById('boton').style.visibility='visible'; // hide 
                             document.getElementById('mensajeboton').innerHTML ="Ahora puede insertar los datos";
                    }else{
                          document.getElementById('mensajealias').innerHTML ="Alias no disponible";
                           document.getElementById('boton').style.visibility='hidden'; // hide 
                             document.getElementById('mensajeboton').innerHTML ="No se puede insertar hasta que no modifique los datos";
                        exit;
                    }
            });
    });
//control de rest
    $("#rest").change(function(){
        var ID=$("#alias").val();
        var REST=$("#rest").val();
        $.post("check_username.php", { username: ID, rest: REST},
                function(result){
                    console.log(result);
                    //if the result is 1
                    if(result == 1){
                        document.getElementById('mensajealias').innerHTML ="Alias disponible";    
                        document.getElementById('boton').style.visibility='visible'; // hide 
                        document.getElementById('mensajeboton').innerHTML ="Ahora puede insertar los datos";
                    }else{
                          document.getElementById('mensajealias').innerHTML ="Alias no disponible";
                           document.getElementById('boton').style.visibility='hidden'; // hide 
                             document.getElementById('mensajeboton').innerHTML ="No se puede insertar hasta que no modifique los datos";
                        exit;
                    }
            });
    });
//control de nombre
    $("#nombre_mesero").keyup(function(){
        var Nombre=$("#nombre_mesero").val();
    });    
});
</script>

我想展示两个函数的动画:$("#alias").keyup(function()和$("#rest").change(function()

任何建议都非常欢迎。谢谢你。

我在$(document).ready(function(){

/ Setup the ajax indicator
  $('body').append('<div id="ajaxBusy"><p><img src="wait.gif"></p></div>');
  $('#ajaxBusy').css({
    display:"none",
    margin:"0px",
    paddingLeft:"0px",
    paddingRight:"0px",
    paddingTop:"0px",
    paddingBottom:"0px",
    position:"absolute",
    right:"3px",
    top:"3px",
     width:"auto"
  });

我还包括了代码:

    // Ajax activity indicator bound to ajax start/stop document events
$(document).ajaxStart(function(){ 
  $('#ajaxBusy').show(); 
}).ajaxStop(function(){ 
  $('#ajaxBusy').hide();
});

现在，每次用户在$("#alias")字段中输入一个字符时，动画开始并在事件结束时结束，但在第七个字符之后动画不再停止....