0

我的 html 页面中有两个 div，我想在隐藏另一个 div 时显示一个 div，并在每 5 秒后自动在第一个隐藏上显示另一个。我正在我的 document.ready 中写这个，但它不起作用。它只隐藏第一个 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>
4

2 回答 2

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

演示：小提琴

于 2013-04-20T11:42:44.173 回答
0

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

于 2013-04-20T11:42:27.500 回答