Question

我的html页面中有两个div，我想在其他隐藏中显示一个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>

Answer 1

尝试

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

和

$(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()
});

演示：Fiddle

Answer 2

你可以在jQuery中使用.toggle()

隐藏一个div继续显示其他

2 个答案: