title: JQuery text fade in fade out
body: <p>I would like to </p>
  
  <ul>
  <li>replace word from "." to "first"</li>
  <li>After 1 sec, replace word from "first" to "second"</li>
  <li>After 1 sec, replace word from "second" to "first"</li>
  <li>After 1 sec, replace word from "first" to "second"</li>
  <li>After 1 sec, replace word from "second" to "first"</li>
  <li>repeatedly continue the cycle</li>
  </ul>
  
  <p>However my code does not work as what I expected.
  - Instead it appends the another word to previous word.</p>
  
  <p>Could you please suggest how I approach this problem? Thank you.
  <a href="http://codepen.io/anon/pen/OyWpQq" rel="nofollow">http://codepen.io/anon/pen/OyWpQq</a></p>
  
  <pre><code>    &lt;h2 class="quotes"&gt;&lt;span class="typeBg"&gt;&lt;span class="type"&gt;.&lt;/span&gt;&lt;/span&gt; 
  &lt;span class="details"&gt;&lt;a href="#"&gt;&lt;span class="detailsText"&gt;.&lt;/span&gt;&lt;/a&gt;&lt;/span&gt; 
   &lt;span class="CTA"&gt;&lt;a href="#"&gt;&lt;span class="CTAText"&gt;.&lt;/span&gt;&lt;/a&gt;&lt;/span&gt;&lt;/h2&gt;
  
  .quotes {height:45px !important;margin-top:-17.5px;margin-bottom:17.5px;border:1px solid #bec0c2;padding:10px 0px;}
  
  .typeBg{height:44px;top:-10px;position:relative;padding:10px 15px;background-color:#004a65;color:white;width:140px;white-space: nowrap; text-overflow: ellipsis; overflow:hidden;display:inline-block;}
  
  .type{display:none;}
  .CTA,.details{border:1px solid #bec0c2;padding:10px 2px;top:-11px;position:relative;background-color:white;}    
  .CTA{height:41px !important;width:138px;text-align:right;white-space: nowrap; text-overflow: ellipsis; overflow:hidden;display:inline-block;}
  .details{height:40px !important; white-space: nowrap; text-overflow: ellipsis; overflow:hidden;width:736px;display:inline-block;}  
  
     showFirst();
  
     function showFirst() {
  
       $('&lt;span/&gt;').html("first").appendTo($(".detailsText"));
       $(".detailsText").fadeIn(500).delay(1000).fadeOut(500,showSecond);
  
     }
  
     function showSecond() {
  
       $('&lt;span/&gt;').html("second ").appendTo($(".detailsText"));
       $(".detailsText").fadeIn(500).delay(3000).fadeOut(500);
  
       showFirst();
     } 
  </code></pre>