Jquery switch divs on timer

Question

I'm trying to make a header that switches on a timer but its just not coming to me.

Here are the headers.

HTML:

<!-- Header Section -->
<header id="mainHeader" class="container" style="display:initial">
<div class="row">
    <div class="col-md-12">
        Makato School of Martial Arts
    </div>
</div>
</header>
<!-- End Header Section -->

<!-- Header2 Section -->
<header id="mainHeader2" class="container" style="display:none">
<div class="row">

    <div class="col-md-4">

        <figure class="center">
            <img src="images/icons/Sincerity.jpg">
            <figcaption>Sincerity</figcaption>
        </figure>           

    </div>

    <div class="col-md-4">

        <figure class="center">
            <img src="images/icons/honesty.jpg">
            <figcaption>Honesty</figcaption>
        </figure>           

    </div>

    <div class="col-md-4">

        <figure class="center">
            <img src="images/icons/integrity.jpg">
            <figcaption>Integrity</figcaption>
        </figure>           

    </div>

</div>
</header>
<!-- End Header2 Section -->

I would like the page to load with the first header and then for it to rotate to the second header. If it's not too hard I'd love for the captions to fade in just slightly after the images.

could someone point me in the right direction?

EDIT:

This is as far as I got before I realized I was lost.

    $(document).ready(function(){

    setInterval(function() {
       if($('#mainHeader').css('display') == 'initial'){

            $("#mainHeader").hide();
            $("#mainHeader2").show();

       } else {

        $("#mainHeader2").hide();
        $("#mainHeader").show();

       }
    }, 5 * 1000);
});

Answer 1

Will this jquery script work for you?

$(document).ready(function(){
    setInterval(function() {
        $("#mainHeader").fadeToggle(5 * 1000);
        $("#mainHeader2").fadeToggle(5 * 1000);
       }, 5 * 1000);
});

You'll have to change the display of mainHeader to "display: visible".

Here's a JSFiddle.

EDIT:

Updated script to wait to for div to hide before showing next.

$(document).ready(function(){
        setInterval(function() {
            if ($("#mainHeader").css('display') == 'none')
            {
                $("#mainHeader2").toggle(function() {
                    $("#mainHeader").toggle();
                });
            }
            else
            {
               $("#mainHeader").toggle(function() {
                    $("#mainHeader2").toggle();
                }); 
            }
           }, 5 * 1000);
    });

Updated JSFiddle.

EDIT 2:

Actually can make the code even easier by doing:

$(document).ready(function(){
setInterval(function() {
    $("[id^='mainHeader']").toggle();
}, 5 * 1000);

});

Updated JSFiddle.

Answer 2

I don't find using jquery in some parts of this situation particularly useful, so I'd recommend:

$(document).ready(function()
{
  setInterval(function() 
  {
    $('#mainHeader-Container').toggleClass('alternate');
  }, 5 * 1000);
});

CSS:

#mainHeader { display: none; }
#mainHeader2 { display: block; }
.alternate #mainHeader { display: block; }
.alternate #mainHeader2 { display: none; }

Html:

<div id="mainHeader-Container">
  <div id="mainHeader">
  </div>
  <div id="mainHeader2">
  </div>
</div>

The advantage is that other elements can rely on a parent having or not having alternate class, which is by far easier to detect then which header is visible.