title: Infinite loop to fade away a div to reveal div underneath
body: <p>I have two div's which are absolute positioned to sit on top of each other. I'm just looking to create a simple jQuery function which fades away the div on top (.group-fcallout-b) to reveal the one underneath (.group-fcallout-a).</p>
  
  <p>Here's my JS:</p>
  
  <pre><code>$(document).ready(function() {
      InfiniteRotator();
  });
  
  function InfiniteRotator() {
  
    var fadeO = setInterval(function() {
      $('.group-fcallout-b').fadeOut(500);
    }, 5000);
  
    clearInterval(InfiniteRotator);
  
    var fadeI = setInterval(function() {
      $('.group-fcallout-b').fadeIn(500);
    }, 5000);
  }
  </code></pre>
  
  <p>I think the issue I'm having at the moment is that fadeIn starts immediately after fadeOut has finished - obviously I want a delay between the two functions.</p>
  
  <p>JSFiddle Link: <a href="https://jsfiddle.net/02xLjh1y/11/" rel="nofollow">https://jsfiddle.net/02xLjh1y/11/</a></p>
  
  <p>Many thanks!</p>