Javascript jQuery：如何在不同的时间间隔切换H1标记？

我需要切换两个

h1

标记。第一个需要在屏幕上显示

3秒

，第二个需要在屏幕上显示

8秒

我需要一个jQuery解决方案。

试试这段代码

HTML

<h1> This is first H1 </h1>
<h1> This is Second H1 </h1>

<h1 id="first"> This is first H1 </h1>
<h1 id="second"> This is Second H1 </h1>

jQuery

<script type="text/javascript">
$(document).ready(function(){
    //initially hide second h1
    $("h1:nth-child(2)").hide();

    function show_second_h1(){
        $("h1:nth-child(1)").hide();
        $("h1:nth-child(2)").show();
        setTimeout(show_first_h1,8000);
    }


    function show_first_h1(){
        $("h1:nth-child(1)").show();
        $("h1:nth-child(2)").hide();
        setTimeout(show_second_h1,3000);
    }

    setTimeout(show_second_h1,3000);
});
</script>

<script type="text/javascript">
$(document).ready(function(){

    //initially hide second h1
    $("#second").hide();

    function show_second_h1(){
        $("#first").hide();
        $("#second").show();
        setTimeout(show_first_h1,8000);
    }


    function show_first_h1(){
        $("#first").show();
        $("#second").hide();
        setTimeout(show_second_h1,3000);
    }

    setTimeout(show_second_h1,3000);
});
</script>

$（文档）.ready（函数（）{
//最初隐藏第二个h1
$（“#秒”）.hide（）；
函数show_second_h1（）{
$（“#第一”）.hide（）；
$（“#秒”）.show（）；
设置超时（先显示\u\u H18000）；
}
函数show_first_h1（）{
$（“#第一”）.show（）；
$（“#秒”）.hide（）；
设置超时（显示秒数为3000）；
}
设置超时（显示秒数为3000）；
});

简化演示

HTMl

---

看看这是什么意思？你想在3秒钟后躲起来？是的。然后显示第二个。非常欢迎@rista404:）

   <h1 id="h1">

        heading 1
    </h1>
    <h1 id="h2">
            heading 2
    </h1>

function ToggleI() {
setTimeout(function(){
  $('#h1').toggle();
}, 3000);
    setTimeout(function(){
  $('#h2').toggle();
}, 8000);
}
window.setInterval(ToggleI, 1000);