javascript - jQuery: How to toggle H1 tags at different time intervals? -

i need toggle 2 h1 tags. first 1 needs displayed 3 seconds on screen, , second needs displayed 8 seconds on screen.

i need jquery solution.

try code.

html

<h1> first h1 </h1> <h1> 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> 

it call show_first_h1() , show_second_h1() @ given time-interval 1 one show respective h1 tag.

demo jsfiddle

edit:

if have control on html , can set id h1 following simplified code. html

<h1 id="first"> first h1 </h1> <h1 id="second"> 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> 

simplified demo jsfiddle