Question

尝试一次隐藏一个div（每个之间间隔5秒），当第三个隐藏时，第一个div立即显示。并且无限地那样。

我试过了，但效果不好。成功隐藏它们但不显示它们。

setTimeout(function() {
  $('#span3').hide();
}, 5000);

setTimeout(function() {
  $('#span2').hide();
}, 10000);

setTimeout(function() {
  $('#span1').hide();
}, 15000);

setTimeout(function() {
  $('#span3').show();
}, 15000);

setTimeout(function() {
  $('#span2').show();
}, 20000);

setTimeout(function() {
  $('#span1').show();
}, 25000);

.appear-span div span {
  display: block;
  background-color: black;
  padding: 5px 0;
  color: white;
  width: 200px;
  text-align: center;
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="appear-span">
  <div id="span3">
    <span>Selling food.</span>
  </div>
  <div id="span2">
    <span>Selling drink.</span>
  </div>
  <div id="span1">
    <span>Selling kidneys.</span>
  </div>
</div>

如果我希望它们一个接一个地隐藏5秒，我在哪里添加时间？

$("#span3").hide(function(){
  $("#span2").hide(function(){
    $("#span1").hide(function(){
    });
  });
});

Answer 1

检查上一个div是否可见，逐个隐藏div，如果隐藏了最后div，则逐个显示div。

setInterval(function() {
    if ($(".appear-span > div:last").is(":visible"))
        $(".appear-span > div:visible").first().hide();   
    else
        $(".appear-span > div:not(:visible)").first().show();   
}, 5000);

＆＃13;

setInterval(function() {
    if ($(".appear-span > div:last").is(":visible"))
        $(".appear-span > div:visible").first().hide();   
    else
        $(".appear-span > div:not(:visible)").first().show();   
}, 1000);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="appear-span">
  <div id="span3">
    <span>Selling food.</span>
  </div>
  <div id="span2">
    <span>Selling drink.</span>
  </div>
  <div id="span1">
    <span>Selling kidneys.</span>
  </div>
</div>

＆＃13;

Answer 2

你可以尝试这样的事情。

逻辑

隐藏所有div并显示要显示的div。
您可以使用.eq在必要位置查找元素

＆＃13;

var counter = -1;
function updateUIState(){
  $('[id^="span"]').hide().eq(++counter % 3).show()
  initTimeout();
}

function initTimeout(){
  setTimeout(updateUIState, 1000)
}

initTimeout();

＆＃13;

.appear-span div span {
    display: block;
    background-color: black;
    padding: 5px 0;
    color: white;
    width: 200px;
    text-align: center;
    position: absolute;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="appear-span">
  <div id="span3">
    <span>Selling food.</span>
  </div>
  <div id="span2">
    <span>Selling drink.</span>
  </div>
  <div id="span1">
    <span>Selling kidneys.</span>
  </div>
</div>

＆＃13;

Answer 3

只需嵌套调用然后调用相同的函数，使用jquery延迟。

＆＃13;

$(function() {
var delayInterval = 5000;
function hideAndPeek() {
    $('#span3').delay(delayInterval).hide(function() {
        $('#span2').delay(delayInterval).hide(function() {
            $('#span1').delay(delayInterval).hide(function() {
                $('#span3').delay(delayInterval).show(function() {
                    $('#span2').delay(delayInterval).show(function() {
                        $('#span1').delay(delayInterval).show(function() {
                            hideAndPeek();
                        });
                    });
                });
            });
        });
    });
}
setTimeout(hideAndPeek(), delayInterval);
});

＆＃13;

  p {
    font-size: 150%;
    cursor: pointer;
  }

＆＃13;

<body>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
   <div class="appear-span">
    <div id="span3">
      <span>Selling food.</span>
   </div>
  <div id="span2">
    <span>Selling drink.</span>
  </div>
  <div id="span1">
    <span>Selling kidneys.</span>
  </div>
 </div>
</body>

＆＃13;

如何逐个隐藏元素然后使用jquery逐个显示它们？

3 个答案:

逻辑