Ajax Add Loading Delay

Ajax Add Loading Delay

I'm new to jQuery so learning as I go.

I've created an ajax request which shows a loading circle whenever a request is made but I would like to add a delay before the sucess data is shown.

Some of the requests are really quick which is great but I would like to display the loading cirlce for just a second evrytime so it's clear the data has changed. How could I add this?

There maybe a better solution and if I've coded anything incorrectly please do let me know?

Thanks

Jemes


<script type="text/javascript">
$(function() {
   $("a.ajaxed").click(function() {
      var1 = $(this).attr('href');
      $('#results').empty();

      $.ajax({
         url: var1,
         cache: false,
         success: function(html){
            $('#results').append(html);
         },
         error:function (XMLHttpRequest, textStatus, errorThrown) {
            $('#results').append(XMLHttpRequest.responseText);
         }
      });   
      return false;
   });
});


$(document).ready(function() {
    /*shows the loading div every time we have an Ajax call*/
    $('#loading').bind("ajaxSend", function(){
      $(this).show();
     }).bind("ajaxComplete", function(){
      $(this).hide();
     });
})
</script>



<li class="nav"><a href="test.asp?sectionID=<%=rsSection("ID")%>" title="<%=rsSection("Section")%>" class="ajaxed"><%=rsSection("Section")%></a></li>



<div id="results"></div><!--end results-->

<div id="loading"><img src="ajax-loader.gif" /></div>


<style type="text/css">
   #results{
      float:right;
      width:240px;
      border:solid #000000 1px;
      padding:5px;
   }
   
   #loading{
      display:none;
      float:right;
      width:240px;
      padding:5px;
   }
</style>