jQuery fade content out and then fade new content in continuously

Question

I want to continuously fade 2 pieces of content in and out of the same position. Currently the fade in fade out works but the content is below the other content and they are both viewable when the document loads.

To put it simply the content will keep switching between #fade1 and #fade2.

HTML:

<section id="text-slider">
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <p id="fade1">"IT WAS SUCH A PLEASURE WORKING WITH STOKES STREET ON SPECTROSPECTIVE. THEY SURPASSED ALL EXPECATIONS. WE WERE GOBSMACKED, FRANKLY."</p>
                <p id="fade2" style="opactiy:0">test</p>
            </div><!-- col -->
            <div class="col-md-4">
                <p></p>
            </div><!-- col -->
            <div class="col-md-4">
                <p></p>
            </div><!-- col -->
        </div><!-- row -->
    </div><!-- container -->
</section><!-- text slider -->

JS:

    $(document).ready(function () {

      // runs fade code for homepage content
      fadeThem();

}

    // fades content in and out on homepage
        function fadeThem() {
            $("#fade1").fadeOut(3000, function() {
                $("#fade2").fadeIn(2000, fadeThem());
                $("#fade2").fadeOut(2000, fadeThem());
                $("#fade1").fadeIn(2000, fadeThem());
            });
        }

Answer 1

Working Code (JS Fiddle): http://jsfiddle.net/nfdebmen/4/

You can have any Number of PlaceHolders in this code. I have made 4.

var _toggle = {
    
  totalNodes: null,
  lastNode: 0,
    
  duration: 1000,
    
  init: function () {
  
    _toggle.totalNodes = $(".toggle").length;
      
    _toggle.next();
  
  },
    
  next: function () {
  
    var nextNode = _toggle.lastNode + 1;
      
    if (nextNode >= _toggle.totalNodes) {
      
      nextNode = 0;
      
    }
      
    //
      
    $(".toggle:eq(" + _toggle.lastNode + ")").fadeOut(_toggle.duration, function () {
    
      $(".toggle:eq(" + nextNode + ")").fadeIn(_toggle.duration);
        
      _toggle.next();
    
    });
      
    _toggle.lastNode = nextNode;
      
  }
    
}

$(document).ready(function () {

  _toggle.init();

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="text-slider">
  <div class="container">
    <div class="row">
      <div class="col-md-4">
        <p class = "toggle active">"IT WAS SUCH A PLEASURE WORKING WITH STOKES STREET ON SPECTROSPECTIVE. THEY SURPASSED ALL EXPECATIONS. WE WERE GOBSMACKED, FRANKLY."</p>
        <p class = "toggle" style = "display: none;">test</p>
        <p class = "toggle" style = "display: none;">Ahsan</p>
        <p class = "toggle" style = "display: none;"><a href = 'http://aboutahsan.com' target = "_blank">http://aboutahsan.com</a></p>
      </div><!-- col -->
      <div class="col-md-4">
        <p></p>
      </div><!-- col -->
      <div class="col-md-4">
        <p></p>
      </div><!-- col -->
    </div><!-- row -->
  </div><!-- container -->
</section><!-- text slider -->

Answer 2

Try using .fadeToggle()

$(document).ready(function() {
  var p = $("p[id^=fade]");
  function fadeThem() {
    return p.fadeToggle(3000, function() {
      fadeThem()
    });
  }
  fadeThem();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section id="text-slider">
  <div class="container">
    <div class="row">
      <div class="col-md-4">
        <p id="fade1">"IT WAS SUCH A PLEASURE WORKING WITH STOKES STREET ON SPECTROSPECTIVE. THEY SURPASSED ALL EXPECATIONS. WE WERE GOBSMACKED, FRANKLY."</p>
        <p id="fade2" style="display:none">test</p>
      </div>
      <!-- col -->
      <div class="col-md-4">
        <p></p>
      </div>
      <!-- col -->
      <div class="col-md-4">
        <p></p>
      </div>
      <!-- col -->
    </div>
    <!-- row -->
  </div>
  <!-- container -->
</section>
<!-- text slider -->

Answer 3

Why don't you put your code in : $( window ).load(function() {} ;

Something like this :

    $( window ).load(function() {
        // -- Snipped -- //
        $(".right-image-crm").addClass('right-image-up');


        $(".left-image-crm").addClass("left-image-up");


        $(".center-image-crm").addClass("center-image-up");

        $(".loader").fadeOut(1000,function(){

}


        });