title: creating jquery fadein and fadeout to replace html text
body: <p>Just wanted to ask a quick question with my jquery code. just started using Jquery/JS and I feel like there is a cleaner way to do this. It does fade to "and much more" but when it goes back, its not a fade its more of a switch. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
  
    setInterval(swapText, 4000);
  
    function swapText(){
      $("#profile-text-fade").fadeOut(500, function() {
        $(this).fadeIn(1000).delay(2000);
        $(this).html('and much more!');
        $(this).fadeIn(2000, function () {
          $(this).html('In the making, Soon to show all the work I can crate!');
        });
      });
    }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
      background-color: #FFC85E;
  }
  .aligh {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  .jumbotron_resize {
    padding-top: 18%;
    padding-bottom: 10em;
    margin-bottom: 10em;
    background-color: #FFC85E;
    font-size: 1.2em;
  }
  
  h1, p{
  text-align: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="description" content="Profile Test Page"&gt;
      &lt;meta name="keywords" content="HTML,CSS,XML,JavaScript"&gt;
      &lt;meta name="author" content="Salvador Cervantes"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"&gt;
      &lt;link rel='stylesheet' type:'text/css' href='../CSS/main.css'&gt;
      &lt;title&gt;
         Test page
      &lt;/title&gt;
    &lt;/head&gt;
  
  
    &lt;body&gt;
      &lt;div class="align"&gt;
        &lt;div class="jumbotron jumbotron-fluid jumbotron_resize"&gt;
          &lt;div class="container"&gt;
            &lt;h1 class="display-3"&gt;test Profile&lt;/h1&gt;
            &lt;p  id='profile-text-fade' class="lead"&gt;In the making, Soon to show all the work I can crate!&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;footer&gt;
          &lt;div&gt;
            &lt;p&gt;&amp;copy 2017
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"&gt;&lt;/script&gt;    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src='../js/main.js'&gt;&lt;/script&gt;
    &lt;/body&gt;
    &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Now what I'm trying to do is to fadeout the text that is on the webpage and replace it with "and much more!" and then fade back to the original text of "in the making...".  right now, the last part just snaps back to place and dones't fade. Any help would be amazing! </p>
  
  <p>Thank you</p>