javascript - Jquery 在计时器上切换 div

Question

我正在尝试制作一个打开计时器的 header ，但它就是不来找我。

这是标题。

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 -->

我希望页面加载第一个标题，然后将其旋转到第二个标题。如果不是太难的话，我希望字幕在图像之后稍微淡入。

有人能指出我正确的方向吗？

编辑:

这是我在意识到自己迷路之前所得到的。

    $(document).ready(function(){

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

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

       } else {

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

       }
    }, 5 * 1000);
});

Answer 1

这个 jquery 脚本对你有用吗？

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

您必须将 mainHeader 的显示更改为“display:visible”。

这是一个JSFiddle .

编辑:

更新了脚本以等待 div 隐藏后再显示下一个。

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

已更新JSFiddle .

编辑2:

实际上可以通过以下方式使代码变得更加简单:

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

});

Updated JSFiddle .