Question

我有一个包含多个引导列的页面，我正在尝试的是显示前六个div，其中class=inner在页面加载时逐个显示，这是我在这里创建的在JsFiddle

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
body {
    overflow: hidden;
}
.main-wrapper {
    float: left;
    width: 100%;
    background: #cccccc;
}
.row {
    border-bottom: 1px solid #444;
}
.col-md-3 {
    border: 1px solid #444;
}
.overflowH {
    overflow: hidden;
}
</style>

<script type='text/javascript'>
window.onload=function(){
    function setHeight() {
        windowHeight = $(window).innerHeight();
        $('.fullH').css('height', windowHeight);
    };
    setHeight();
    $(window).resize(function() {
        setHeight();
    });
    $('.col-md-3').height( Math.round( $('.col-md-3').width() ) * Math.tan(0.523599) );
    $('.row').css('transform', 'skewY(-20deg)');
}
</script>
<div class="main-wrapper">
  <div class="container-fluid">
    <div class="row fullH overflowH">
      <div class="col-md-3">
        <div class="inner">Text Here</div>
      </div>
      <div class="col-md-3">
        <div class="inner">Text Here</div>
      </div>
      <div class="col-md-3">
        <div class="inner">Text Here</div>
      </div>
      <div class="col-md-3">
        <div class="inner">Text Here</div>
      </div>
      <div class="col-md-3">
        <div class="inner">Text Here</div>
      </div>
      <div class="col-md-3">
        <div class="inner">Text Here</div>
      </div>
      <div class="col-md-3">Text Here</div>
      <div class="col-md-3">Text Here</div>
      <div class="col-md-3">Text Here</div>
      <div class="col-md-3">Text Here</div>
      <div class="col-md-3">Text Here</div>
      <div class="col-md-3">Text Here</div>
      <div class="col-md-3">Text Here</div>
      <div class="col-md-3">Text Here</div>
      <div class="col-md-3">Text Here</div>
      <div class="col-md-3">Text Here</div>
      <div class="col-md-3">Text Here</div>
      <div class="col-md-3">Text Here</div>
      <div class="col-md-3">Text Here</div>
      <div class="col-md-3">Text Here</div>
    </div>
  </div>
</div>

Answer 1

css add：.col-md-3.show { opacity: 1; transition: .2s; } javascript add：

$(".col-md-3").each(function(index) {
    var $this = $(this);
    setTimeout(function () { $this.addClass("show"); }, index * 200);
  });

尝试：https://jsfiddle.net/snuu1958/7/

Answer 2

这就是你想要的。试试这个。

＆＃13;

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>

<style type="text/css">
	div.same{
		width: 400px;
		height: 50px;
		margin: 30px;
		border: 5px solid yellow;
		display: none;
	}

	div#div1{
		background-color: orange;
	}
	div#div2{
		background-color: pink;
	}

	div#div3{
		background-color: purple;
	}
	div#div4{
		background-color: green;
	}
	div#div5{
		background-color: red;
	}
	div#div6{
		background-color: blue;
	}


</style>

<body>
	
<div class="same" id="div1"></div>
<div class="same" id="div2"></div>
<div class="same" id="div3"></div>
<div class="same" id="div4"></div>
<div class="same" id="div5"></div>
<div class="same" id="div6"></div>


	
</body>

<script type="text/javascript">
 
 $(document).ready(function(){
 	for(var i=0;i<6;i++)
 	{
 		var theid = $("#div"+i);
 		var thetime = 800 *i;
 		$(theid).show(thetime); // or use .fadeIn()
 		thetime = thetime * i;
 	}
 });



</script>
</html>

＆＃13;

使用jQuery / CSS在页面加载上逐个显示div

2 个答案: