title: JQuery FadeIn FadeOut Button Not Working
body: <p>I have a form which has a save button. When the save button is clicked it runs ajax to save the form contents. That works. What I am having troubles with is the save button fadein fadeout. The text of the save button is "Save as Draft". When clicked I would like it to fade out, change the text to "Draft saved at [time]" and then fade in to show that it was saved, and the time it was saved. After a few seconds I would like that button message to fade out and be replaced by the original "Save as Draft" button.</p>
  
  <p>I'm thinking I have to nest the fades into functions, but my jquery fading talents are minimal and fading rapidly :)</p>
  
  <p>Below is the success part of the ajax ....</p>
  
  <pre><code>success: function(data) {
      var date = new Date(),
      hours = date.getHours(),
      minutes = date.getMinutes();
  
      if (hours &gt; 12) hours = hours - 12;
      if (minutes &lt; 10) minutes = '0' + minutes;
  
      var save_draft = '&lt;div id="save-button" class="button-clone"&gt;Save as Draft&lt;/div&gt;';
      var draft_saved = '&lt;div id="save-button" class="button-clone"&gt;Draft Saved at ' + hours + ':' + minutes + '&lt;/div&gt;';
  
      $('#save-button').fadeOut(1000);
      $('#save-button').replaceWith(draft_saved);
      $('#save-button').fadeIn(1000);
      $('#save-button').fadeOut(1000);
      $('#save-button').replaceWith(save_draft);
      $('#save-button').fadeIn(1000);
  }
  </code></pre>