Javascript 连续隐藏一个div以显示另一个div

我有两个div在我的html页面，我想显示一个div对另一个隐藏，并显示在第一个隐藏后，每5秒自动其他。我正在我的文档中写这篇文章。准备好了，但它不起作用。它只隐藏第一个div并显示它，然后什么也不做

  $("#free-trial-link").show().delay(5000).queue(function(n) {
      $(this).hide(); n();
  });


  $('#free-trial-link').fadeIn(function() {
        $('#record-call-link').fadeIn();   
  });

  $('#record-call-link').fadeIn(function() {
        $('#free-trial-link').fadeIn();   
  });

标记为：

   <div class="container_content" style="padding-top: 10px;">
                                                    <p class="date_day" id="p-free-trial-link" style="display: none">
                                                        <img id="free-trial-link" style="cursor: pointer;" src="images/tial-icon.png" width="32"
                                                            height="32"><br>
                                                        Free Trial
                                                    </p>
                                                    <p class="date_day" style="text-align: right; margin-top: 25px;" id="p-record-call-link">
                                                        <img id="record-call-link" style="position: inherit; cursor: pointer;" src="images/record-icon.png"
                                                            width="32" height="32"><br>
                                                        Record a Call
                                                    </p>
                                                    <div class="clear-n">
                                                    </div>
                                                </div>

免费试用




录音

您可以在jQuery中使用

.toggle（）

<div class="container_content" style="padding-top: 10px;">
    <p class="date_day" id="p-free-trial-link" style="display: none">
        <img id="free-trial-link" style="cursor: pointer;" src="images/tial-icon.png" width="32"
        height="32" /><br />
        Free Trial
    </p>
    <p class="date_day" style="text-align: right; margin-top: 25px; display: none" id="p-record-call-link">
        <img id="record-call-link" style="position: inherit; cursor: pointer;" src="images/record-icon.png"
        width="32" height="32" /><br />
        Record a Call
    </p>
    <div class="clear-n">
    </div>
</div>

演示：
请检查此[链接][1]。希望这就是你想要的[1]：它只隐藏免费试用链接，之后什么都不会发生。你想发生什么？文本也应该更改是，p-free-try-link应该隐藏，p-record-call-link应该显示，反之亦然，但是现在free-try-link隐藏，并且在它之后不会发生任何事情。函数也将位于$（function（）？@DotnetSparrow不需要
$(function(){
    function showTrial(){
        $("#p-free-trial-link").show().delay(5000).hide(function(){
            showCall();
        });
    }

    function showCall(){
        $("#p-record-call-link").show().delay(5000).hide(function(){
            showTrial()
        });
    }

    showTrial()
});