title: fadeIn() callback function not waiting until fadeIn() is complete
body: <p>I'm trying to create a function that will fade in appends to an element. To ensure the animations run sequentially and wait for the previous animation to finish, I'm trying to use a callback function (recursively) with fadeIn.</p>
  
  <pre><code>$(document).ready(function() {
      var messages = [];
      messages.push("First message");
      messages.push("Second message")
  
      function appendContentText(newText, callbackFunction, callbackArgument) {
          $("&lt;div&gt;" + newText + "&lt;/div&gt;").hide().appendTo("#content").fadeIn(1000, callbackFunction(callbackArgument));
      }
  
      function runMessageSequence(introCounter = 0) {
          if (introCounter == messages.length) return;
          else appendContentText(messages[introCounter], runMessageSequence, introCounter + 1);
      }
  
      runMessageSequence();
  });
  </code></pre>
  
  <p>The messages all fade in together though. So it seems to me like the subsequent fadeIn's are being called immediately rather than after the 1000 ms delay.</p>
  
  <p>I suspect this might have something to do with the order I'm applying things like 'hide' and 'appendTo' and 'fadeIn' to the selector.</p>