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

Question

我需要切换两个h1标签。第一个需要在屏幕上显示3 seconds，第二个需要在屏幕上显示8 seconds。

我需要一个jQuery解决方案。

Answer 1

试试这段代码。

<强> HTML

<h1> This is first H1 </h1>
<h1> 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>

它将按照给定的时间间隔逐个调用show_first_h1()和show_second_h1()，以显示相应的H1标记。

演示jsFiddle

修改

如果您可以控制HTML并且可以为H1设置id，那么以下是简化代码。 的 HTML

<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
    $("#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>

简化演示jsFiddle

Answer 2

Click for demo

HTML

   <h1 id="h1">

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

Jquery的

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

检查出来