logo标签列表

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

javascriptjqueryhtmlcss
3
尝试每次隐藏一个div（每个之间隔5秒），当第三个div被隐藏时，第一个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(){
    });
  });
});
需要注意的是，我不知道自己在做什么。我从未涉及过JS / jQuery，这只是在互联网上找到的，并使用了某种疯狂的逻辑来扩展到所有的DIV / SPAN。 - Aiden P
@Tushar，我知道你的目标是什么，但我不知道在JS中如何实现。 - Aiden P
https://dev59.com/wnRC5IYBdhLWcg3wMeDf - Suresh Kamrushi
@Tushar - 现在这3个div重叠在一起。您是想要这样呈现，还是需要将它们放在一起并隐藏/显示？ - Nikhil Nanjappa
@AidenP 我理解了你的问题并更新了我的答案。 - Mohammad
3个回答
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);


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

0
你可以尝试这样做。
逻辑：
  • 隐藏所有的 div 并显示需要显示的 div。
  • 你可以使用 .eq 来找到所需位置的元素。

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

function initTimeout(){
  setTimeout(updateUIState, 1000)
}

initTimeout();
.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.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>

-1

只需嵌套调用，然后重新调用相同的函数，使用 jQuery 延迟即可。

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

  
  p {
    font-size: 150%;
    cursor: pointer;
  }
<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>

我需要它无限地运行。这个好像做不到。 - Aiden P
你是想实现类似于脉冲效果吗？ - MacWise
抱歉，我意识到你使用的是 #id 选择器而不是 .class 选择器，已经更新了代码。你可能可以重构一下，并将元素抽象成一个变量，以减少代码行数。 - MacWise
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接