title: Animating inserted elements with jQuery
body: <p>How do I add animations (both in and out) for the tooltips here:</p>
  
  <pre><code>$('.requiredField').each(function () {
      if ($.trim($(this).val()) == '') {
          var labelText = $(this).prev('label').text();
          $(this).parent().append('&lt;div class="error"&gt;Please enter your ' + labelText + '!&lt;/div&gt;');
          $(this).addClass('inputError');
          hasError = true;
      } else if ($(this).hasClass('email')) {
          var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,10})?$/;
          if (!emailReg.test($.trim($(this).val()))) {
              var labelText = $(this).prev('label').text();
              $(this).parent().append('&lt;div class="error"&gt;Sorry! You\'ve entered an invalid ' + labelText + '.&lt;/div&gt;');
              $(this).addClass('inputError');
              hasError = true;
          }
      }
  }
  </code></pre>
  
  <p>Also, how do I add animation to this banner that pops out, once the form has been submitted? Notice, the form has a fadeOut animation. I would also like to animate the paragraph with <code>class=info</code>: </p>
  
  <pre><code>var formInput = $(this).serialize();
  $.post($(this).attr('action'), formInput, function (data) {
      $('form#contact-us').fadeOut("fast", function () {
          $(this).before('&lt;p class="info"&gt;Thanks! Your email has been submitted. Huzzah!&lt;/p&gt;');
      })
  });
  </code></pre>
  
  <p>Script: <a href="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" rel="nofollow">http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js</a></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      &lt;!--//--&gt;&lt;![CDATA[//&gt;&lt;!--
      $(document).ready(function() {
          $('form#contact-us').submit(function() {
              $('form#contact-us .error').remove();
              var hasError = false;
              $('.requiredField').each(function() {
                  if($.trim($(this).val()) == '') {
                      var labelText = $(this).prev('label').text();
                      $(this).parent().append('&lt;div class="error"&gt;Please enter your '+labelText+'!&lt;/div&gt;');
                      $(this).addClass('inputError');
                      hasError = true;
                  } else if($(this).hasClass('email')) {
                      var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,10})?$/;
                      if(!emailReg.test($.trim($(this).val()))) {
                          var labelText = $(this).prev('label').text();
                          $(this).parent().append('&lt;div class="error"&gt;Sorry! You\'ve entered an invalid '+labelText+'.&lt;/div&gt;');
                          $(this).addClass('inputError');
                          hasError = true;
                      }
                  }
              });
              if(!hasError) {
                  var formInput = $(this).serialize();
                  $.post($(this).attr('action'),formInput, function(data){
                      $('form#contact-us').fadeOut("fast", function() {                  
                          $(this).before('&lt;p class="info"&gt;Thanks! Your email has been submitted. Huzzah!&lt;/p&gt;');
                      });
                  });
              }
  
              return false;   
          });
      });
      //--&gt;!]]&gt;
  &lt;/script&gt;
  </code></pre>