Question

我希望在加载页面时按照几秒钟的间隔逐个加载列，并按照代码执行此操作：

setTimeout(function()
    {
       $("#box1").removeClass("noDisplay");
    },1000);

 setTimeout(function()
    {
       $("#box2").removeClass("noDisplay");
    },1200);

 setTimeout(function()
    {
       $("#box3").removeClass("noDisplay");
    },1400);

.noDisplay{display:none;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="container">
  <div class="row">
   <div class="col-xs-4 noDisplay" id="box1">Column 1 </div>
   <div class="col-xs-4 noDisplay" id="box2">Column 2 </div>
   <div class="col-xs-4 noDisplay" id="box3">Column 3 </div>
  </div>
</div>

但我认为必须有其他一些方法可以轻松完成，并且有一些效果，如淡入淡出或其他什么，有人可以建议吗？

提前致谢

Answer 1

从How to show each div, one by one on jquery?

尝试此操作

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
   <div class="col-xs-4 noDisplay" id="box1">Column 1 </div>
   <div class="col-xs-4 noDisplay" id="box2">Column 2 </div>
   <div class="col-xs-4 noDisplay" id="box3">Column 3 </div>
  </div>
</div>
<style>
.noDisplay{display:none;}
</style>

<script>
$(function() {
    showDiv();
});
function showDiv() {
    if($('.noDisplay:hidden').length) {
        $('.noDisplay:hidden:first').fadeIn();
        setTimeout(showDiv, 1000);
    }
}
</script>

＆＃13;

Answer 2

试试这个：

$(document).ready(function() {
   var tTimer, count = 0;

   tTimer = setInterval(function (){
       count++;
       $("#box" + count).removeClass("noDisplay");
       if (count >= 4) clearInterval(tTimer);
   }, 100);
});

Answer 3

您可以使用间隔来执行此操作，并将其与某些CSS混合使用，以便代码：

的Javascript

$(document).ready(function(){
    var num = 3; //Number of elements
    var currentElem = 1;
    setInterval(function () {
        if(currentElem <= num) {
            $("#box"+currentElem).css('opacity','1');
            currentElem++;
        }
    }, 1000);
});

CSS

.Lazy {
    opacity: 0;
    transition: 1s;
}

HTML

<div class="container">
      <div class="row">
        <div class="col-xs-4 Lazy" id="box1">Column 1 </div>
        <div class="col-xs-4 Lazy" id="box2">Column 2 </div>
        <div class="col-xs-4 Lazy" id="box3">Column 3 </div>
      </div>
</div>

您还可以通过使用＆＃34; box＆＃34; + currentElem ID检查元素的存在来使其更具动态性！

Answer 4

你的意思是这样吗？

$(document).ready(function() {
  var dispInterval = 750;
  
  $.each($('div.noDisplay'), function(key, divItem) {
    setTimeout(function(){
      $(divItem).fadeToggle('slow');
    }, dispInterval);
    dispInterval += dispInterval;
  });
});

.noDisplay{display:none;}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container">
  <div class="row">
   <div class="col-md-4 noDisplay" id="box1">Column 1 </div>
   <div class="col-md-4 noDisplay" id="box2">Column 2 </div>
   <div class="col-md-4 noDisplay" id="box3">Column 3 </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

在页面加载时逐个加载引导列

4 个答案:

的Javascript

CSS

HTML