Use delay to show loading graphic for 2 seconds

Use delay to show loading graphic for 2 seconds

Hi,

I have a button on my site, which when clicked calls an ajax function.  What I want to do though, is append a loading graphic for just 2 seconds inside the button such that it looks as if the website is 'busy' saving when the button is clicked.  This is obviously just for user feedback as the 'save' is done instantly - it's just for user feedback to make the user confident that the save button has worked.  To do this, I'm trying to append a loading image to the save button, delay for 2 seconds, then remove the image, but it doesn't seem to work.

I have this HTML:

  1. <p><a href="#" title="" class="save">Save</a></p>
And this jQuery:
  1. $('.save').click(function(){
        $(this).html('Save <img src="loading.gif" />').delay(2000).html('Save');
        return false;
      });



Can anyone see why this isn't working, and suggest a solution?

Many thanks.