title: jQuery AJAX: How to append a "SAVED" message and make it disappear after a second
body: <p>this is probably really simple for a jQuery expert.</p>
  
  <p>I have &lt;div id=&quot;form23&quot;&gt;&lt;form&gt;&lt;textarea&gt;blahblah&lt;/textarea&gt;&lt;input type=&quot;button&quot; value=&quot;save&quot; onClick=&quot;saveCaption(23)&quot;&gt;&lt;/form&gt;&lt;/div&gt;</p>
  
  <p>I want a SAVED message appear and disappear. But I DO NOT want to make the form or its elements disappear.</p>
  
  <p>I have a AJAX call that is like the following.</p>
  
  <pre><code>function saveCaption(id) {
  
  var queryString = $('#form'+id).formSerialize(); 
  
    $.ajax({
  
      type: "POST",
  
      url: "includes/ajax.php?request=saveCaption",
  
      data: queryString,
  
      success: function(response) {
  
        $('#form'+id).append(response)
  
      }
  
    });
  
    return false;
  
  }
  </code></pre>
  
  <p>I was wondering.. I can append the response. But is there a way to fade it out right away after a second. Right now, it just keeps repeating and adding to the last append. I would like it to appear and disappear right after using fadeOut.</p>
  
  <p><strong>UPDATE: I did this based on theIV and RaYell's response. It works.. but is it elegant?</strong></p>
  
  <p>function saveCaption(id) {</p>
  
  <pre><code>var queryString = $('#form'+id).formSerialize(); 
  
    $.ajax({
  
      type: "POST",
  
      url: "includes/ajax.php?request=saveCaption",
  
      data: queryString,
  
      success: function(response) {
  
          $('#form'+id).append('&lt;div id="message"&gt;'+response+'&lt;/div&gt;');
  
          setTimeout(function () {
  
            $('#message').fadeOut(function(){
  
              $(this).remove();
  
            });
  
          }, 1000);
  
      }
  
    });
  
    return false;
  </code></pre>
  
  <p>}</p>